How to Create an HTML Sitemap Page for Blogger Blog

How can you make an easy navigational website? You can create an HTML sitemap for the Blogger blog to make your blog more user-friendly. Blogger has many limitations. If you like to add some additional features to it, you’ve to tweak with codes for sitemap, schema markup, etc. But here we have got the solution for this.

Create an HTML sitemap for Blogger blog to enhance the user experience and increase traffic

HTML sitemap for Blogger
HTML sitemap for Blogger

To create a new sitemap page, go to the Blogger dashboard and select create new.

Create New Page Blogger
Create New Page Blogger

Now, First of all, you’ve to add a title of your page that should be sitemap as displayed below.

Add Title to sitemap page blogger
Add Title to sitemap page Blogger.

Now select the HTML View for your Blogger page and paste the below code into your page’s HTML section. And finally, publish the sitemap page of your Blogger Blogspot blog. You can change the values given in the red line of this code.

<script type='text/javascript'></script>
var postTitle=new Array,postUrl=new Array,postPublished=new Array,postDate=new Array,postLabels=new Array,postRecent=new Array,sortBy="titleasc",numberfeed=0;function bloggersitemap(t){!function(){if("entry"in t.feed){var e=t.feed.entry.length;numberfeed=e,ii=0;for(var s=0;s<e;s++){for(var o,i=t.feed.entry[s],l=i.title.$t,r=i.published.$t.substring(0,15),p=0;p<;p++)if("alternate"[p].rel){[p].href;break}var a="";for(p=0;p<;p++)if("enclosure"[p].rel){[p].href;break}var n="";if("category"in i)for(p=0;p<i.category.length;p++){var c=(n=i.category[p].term).lastIndexOf(";");-1!=c&&(n=n.substring(0,c)),postLabels[ii]=n,postTitle[ii]=l,postDate[ii]=r,postUrl[ii]=o,postPublished[ii]=a,postRecent[ii]=s<10,ii+=1}}}}(),sortPosts(sortBy="titledesc"),sortlabel(),displayToc()}function sortPosts(t){function e(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s,s=postDate[t],postDate[t]=postDate[e],postDate[e]=s,s=postUrl[t],postUrl[t]=postUrl[e],postUrl[e]=s,s=postLabels[t],postLabels[t]=postLabels[e],postLabels[e]=s,s=postPublished[t],postPublished[t]=postPublished[e],postPublished[e]=s,s=postRecent[t],postRecent[t]=postRecent[e],postRecent[e]=s}for(var s=0;s<postTitle.length-1;s++)for(var o=s+1;o<postTitle.length;o++)"titleasc"==t&&postTitle[s]>postTitle[o]&&e(s,o),"titledesc"==t&&postTitle[s]<postTitle[o]&&e(s,o),"dateoldest"==t&&postDate[s]>postDate[o]&&e(s,o),"datenewest"==t&&postDate[s]<postDate[o]&&e(s,o),"orderlabel"==t&&postLabels[s]>postLabels[o]&&e(s,o)}function sortlabel(){sortPosts(sortBy="orderlabel");for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],firsti=t;do{t+=1}while(postLabels[t]==temp1);if(e=t,sortPosts2(firsti,t),e>postTitle.length)break}}function sortPosts2(t,e){function s(t,e){var s=postTitle[t];postTitle[t]=postTitle[e],postTitle[e]=s,s=postDate[t],postDate[t]=postDate[e],postDate[e]=s,s=postUrl[t],postUrl[t]=postUrl[e],postUrl[e]=s,s=postLabels[t],postLabels[t]=postLabels[e],postLabels[e]=s,s=postPublished[t],postPublished[t]=postPublished[e],postPublished[e]=s,s=postRecent[t],postRecent[t]=postRecent[e],postRecent[e]=s}for(var o=t;o<e-1;o++)for(var i=o+1;i<e;i++)postTitle[o]>postTitle[i]&&s(o,i)}function displayToc(){for(var t=0,e=0;e<postTitle.length;){temp1=postLabels[e],document.write(""),document.write('<div class="post-archive"><h4>'+temp1+'</h4><div class="ct-columns">'),firsti=t;do{document.write("<p>"),document.write('<a " href="'+postUrl[t]+'">'+postTitle[t]),1==postRecent[t]&&document.write(" - <strong><span>New!</span></strong>"),document.write("</a></p>"),t+=1}while(postLabels[t]==temp1);if(e=t,document.write("</div></div>"),sortPosts2(firsti,t),e>postTitle.length)break}}
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script> 

Now this page will look like this

Blogger HTML sitemap page
Blogger HTML sitemap page
  1. Page title.
  2. HTML mode of the page.
  3. Paste the javascript in the HTML section.
  4. Provide search Description, if any.
  5. Allow, disallow comment, etc.

You’ve to follow these steps.

  1. Create a New Page for your Blogger Blog.
  2. Add a title for your blog i.e. sitemap.
  3. Paste the javascript in the HTML section of your page.
  4. Publish the page; your sitemap is live now.

Now your HTML sitemap has been successfully published. You can add it to the navigation menu for a better user experience.

This HTML sitemap is only for users, not for search engines. You can also generate an XML sitemap for your Blogger blog to the search engine console.

I hope you like this article. In case of any doubt, you can comment below. Thank You.

Ashok Kumar

Ashok Kumar working in the Search Engine Optimization field since 2015. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.


  1. I was trying to solve this problem on the site for hours and finally with the help of this wonderful article I managed to do it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button