How to Create HTML Sitemap Page in Blogger

Sitemap of a blog helps search crawlers to crawl the entire blog properly. It helps to increase our blog crawling and indexing. Previously, I have shared a tutorial about How to Submit Blogger Sitemapto Google Webmaster Tools. That sitemap is in .XML format which we use to submit in Google Webmaster Tool which is only for search engines so that they can index all of our blog posts. Today in this tutorial I am going to share a trick by which you can create a HTML sitemap for your blog readers so that they can easily select a post to read. If you use HTML sitemap in your blog wisely then you can increase your blog page rank also. You can show all of your blog posts at single sitemap page or you can use sitemap for particular label. Whatever your need is, this tutorial will help you. So, let see how to add a sitemap page in blogger.

Creating Sitemap Page for All Labels

If you want to show all of your blog posts at same page then follow below steps one by one.

1.    Go to your blogger blog.

2.    Now Navigate to Pages > New Page > Blank Page.

3.    Switch it to HTML mode.

4.    Paste below code in the post body.

<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.allin1pk.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

5.    Replace www.allin1pk.com with your own blog URL.

6.    Click Publish button.

7.    That’s it.

Creating Sitemap Page for Particular Label

If you want to show posts from specific labels, like in this page “SEO Tips for Bloggers”, then instead of the above code, use below code.

<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.allin1pk.com/feeds/posts/default/-/Label%20Name?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts&amp;max-results=999″></script>
</ul>

Replace www.allin1pk.com with your blog URL and Label%20Name with your label name.

Remember: If you are using single word as your label name like “SEO” then put SEO there but if you are using more than one word, then put %20 between each word.

For example: if the label name is Blogger Tricks, then put Blogger%20Tricks.

The label name is case sensitive, so take care of it. Means don’t put seo in the place of SEO. The code will not work in that case.

§  Must Check: HTML Sitemap page of All in One.

Final Words!

This was the little trick about how to make HTML sitemap page in Blogger for particular label or for all labels. I hope you guys like this tutorial. Feel free to leave comment below this post to share your views and feedback.