How to Create HTML Sitemap Page in Blogger?

29
5393

How to Create Blogger Sitemap HTML page

Sitemap of a blog/website helps posts get index to search engines easily and search engines generates traffic which is very important for a blog/website to survive.

I have previously written a post on How to Submit Blogger Sitemap to Google Webmaster Tools, and that sitemap is created in .xml format which is perfect for search engines but if you want your readers to access sitemap page which gives them accessibility to easily select a post to read then you must create HTML sitemap page.

Create Sitemap Page for Particular Labels

This will only show posts from specific labels.

[pull_quote_center]<script type=”text/javascript”>
var numposts = 100;
var standardstyling = true;
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write(‘<li>’);
document.write(posttitle);}
if (standardstyling) document.write(‘</li>’);
}
</script>
<ul>
<script src=”http://www.yourwebsite.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>[/pull_quote_center]

Important: If your labels are single word like “SEO” then put SEO there but if your label has more than one word, then put %20 between each word.

For example: if the label name is WordPress Tips, then put WordPress%20Tips

Label name is case sensitive. So if your label is SEO (all capital letters) don’t put seo (in small letters).

Create Sitemap for All Labels

This will show posts from all labels.

  1. Open your blogger panel/admin panel
  2. Go to Pages > New Page > Blank Page
  3. Switch to HTML mode
  4. Paste below code in the post body
    [pull_quote_center]<script type=”text/javascript”>
    var numposts = 100;
    var standardstyling = true;
    function showrecentposts(json) {
    for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == ‘alternate’) {
    posturl = entry.link[k].href;
    break;
    }}
    posttitle = posttitle.link(posturl);
    if (standardstyling) document.write(‘<li>’);
    document.write(posttitle);}
    if (standardstyling) document.write(‘</li>’);
    }
    </script>
    <ul>
    <script src=”http://www.bloggertipstricks.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
    </ul>[/pull_quote_center]
  5. Click Publish !.
  6. Voila ! Done.

Related:
How to Submit Blogger Sitemap to Google Webmaster Tools

Last WordsIf you find this helpful make sure you share it. For any questions and queries leave comments.

  • Smith

    You have made some decent points there. I looked on the net to learn more about the issue
    and found most individuals will go along with your views on this website.

  • Basham

    Very good article. I will be facing a few of these issues as
    well.

    • FroshGeek

      Thank You !

  • Manly

    I’m gone to say to my little brother, that he should also pay a visit this webpage on regular basis to get updated from newest gossip.

    • FroshGeek

      Awesome, well appreciated mate !

  • Sam

    I always spent my half an hour to read this web site’s articles all the time along with a
    cup of coffee.

  • Abraham

    Whats up are using WordPress for your blog platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do
    you need any coding expertise to make your own blog?
    Any help would be really appreciated!

    • FroshGeek

      Hi,

      You do not need any coding experience for using WordPress CMS. Yes we are using WordPress platform. Although you might want to look for self hosted WordPress. Hosting on a WordPress server is not a good idea as it have some unusual restrictions and your choice of customization will be very limited. So it’s better if you think of self hosted blog. You can also contact me regarding your blog. I am more than happy to help with anything you might need.

  • Stanley

    What i do not understood is actually how you are no longer actually a lot more smartly-liked than you may
    be now. You’re very intelligent. You know therefore significantly
    with regards to this topic, produced me in my opinion believe it from so many numerous angles.
    Its like women and men don’t seem to be fascinated unless it’s something to accomplish with Lady gaga!
    Your individual stuffs nice. At all times deal with it up!

  • Patrica

    I am no longer certain where you are getting your info, but great topic.
    I needs to spend a while studying more or figuring out more.
    Thank you for wonderful information I used to be searching
    for this information for my mission

    • FroshGeek

      Thanks for your valuable feedback.

  • jayalathsameera

    it is not working for me ,help??

    • Zaid Shakil

      What problem you are facing ?

      • jayalathsameera

        it is not showing. I used another code . now it is working. re check your code

        • Zaid Shakil

          Oh the problem would have been this bit “[pull_quote_center]”
          it’s not a part of the code. Thanks. I will fix it anyways. If you need any help. Let me know.

  • Vinaykumar

    It is not working on my site 🙁

    http://www.wallpaperdig.com

    • FroshGeek

      Do you want me to help you with it and look over your code ? If yes let me know we can contact over skype or via email. Obviously for free 🙂

    • Zaid Shakil

      Do you want me to look over your code and help you ? If yes, we can contact over skype or email.

      • Vinaykumar

        hi Zaid thanks for your reply. Checking my code. If any issues will come to you. Thank you very much

    • Farooq Ahmad Bhat

      here is a very easy way to add html site map.. https://goo.gl/Yf25Kx

  • Devika
  • Ryan Chahal
  • http://www.indiantalks.in/ Hebah
  • usman ghani

    Hello,
    How are you. your post is really good. i uploaded this script in WBP social news site. its working. 🙂
    Thanks again

  • Farooq Ahmad Bhat

    Nice… here is a very easy way to add html site map.. https://goo.gl/Yf25Kx

  • http://www.easkme.com/ Sona Mathews

    Good to know. Thanks!

  • rachman

    code works 100% thanks gan, luar biasa… 🙂

  • Andika Pratama

    Not working in my blog. Many sitemap I trying, but not working

    • Zaid Shakil

      I can help you with it for free. If you’re interested let me know.