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

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

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

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<i.link.length;p++)if("alternate"==i.link[p].rel){o=i.link[p].href;break}var a="";for(p=0;p<i.link.length;p++)if("enclosure"==i.link[p].rel){a=i.link[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>
<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

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.