How to Create An HTML Sitemap on Blogspot? – Blogger Guide

4

An HTML Sitemap is primarily for your blog readers and also helpful for SEO. It helps your readers who want to search your blog using labels or keywords. Users can not understand the default XML sitemap. It is for search engine robots. A Google SEO always recommends considering blog readers first instead of only focusing on search engine robots. You can provide simple navigation by creating an HTML sitemap on Blogspot blogs. Nowadays, no one has time to search your blog for hours. People want quick and effective options.

You can create an HTML sitemap on Blogger blogs which can also sort posts in different ways. This HTML sitemap shows blog posts in chronological order, i.e., newest first, but not limited to this feature only. Blog readers can click the headings Post title, Date of publishing, and labels to sort blog posts as per their choice.

How to create an HTML sitemap on blogspot

Steps to Create An HTML Sitemap Page in Blogger

Step 1. Create A Blog Page

Open the Blogger dashboard, navigate to the Pages menu given on the left sidebar, and click on the New Page button.

Enter the title of the HTML Sitemap page. You may keep it Site Map, Table of Content, or any other suitable title.

Create an HTML sitemap page

Next, switch to HTML view, and copy & paste the given HTML sitemap code on the page.

HTML Sitemap Code

<div id="tp_blogindex">Please wait... populating an HTML sitemap...</div>
<script>function loadblogindex(a){function b(){if("entry"in a.feed){var b=a.feed.entry.length;totalEntires=totalEntires+b;totalPosts=a.feed.openSearch$totalResults.$t;if(totalPosts>totalEntires){var c=document.createElement("script");c.type="text/javascript";startindex=totalEntires+1;c.setAttribute("src","/feeds/posts/summary?start-index="+startindex+"&max-results=500&alt=json-in-script&callback=loadblogindex");blogindexdiv.appendChild(c)}for(var d=0;d<b;d++){var e=a.feed.entry[d];var f=e.title.$t;var g=e.published.$t.substring(0,10);var h;for(var i=0;i<e.link.length;i++){if(e.link[i].rel=="alternate"){h=e.link[i].href;break}}if("content"in e){var j=e.content.$t}else if("summary"in e){var j=e.summary.$t}else var j="";var k=/<\S[^>]*>/g;j=j.replace(k,"");if(j.length>numChars){j=j.substring(0,numChars);var l=j.lastIndexOf(" ");j=j.substring(0,l)+"..."}var m="";if("category"in e){for(var i=0;i<e.category.length;i++){m+="<a href=\"javascript:filterPosts('"+e.category[i].term+"');\" title=\" Click to see all posts under '"+e.category[i].term+"'\">"+e.category[i].term+"</a>, "}var n=m.lastIndexOf(",");if(n!=-1){m=m.substring(0,n)}}postTitle.push(f);postDate.push(g);postUrl.push(h);postSum.push(j);postLabels.push(m)}}if(totalEntires==totalPosts){blogindexLoaded=true;showblogindex()}}b();sortPosts(sortBy);blogindexLoaded=true}function filterPosts(a){postFilter=a;displayblogindex(postFilter)}function allPosts(){postFilter="";displayblogindex(postFilter)}function sortPosts(a){function b(a,b){var c=postTitle[a];postTitle[a]=postTitle[b];postTitle[b]=c;var c=postDate[a];postDate[a]=postDate[b];postDate[b]=c;var c=postUrl[a];postUrl[a]=postUrl[b];postUrl[b]=c;var c=postSum[a];postSum[a]=postSum[b];postSum[b]=c;var c=postLabels[a];postLabels[a]=postLabels[b];postLabels[b]=c}for(var c=0;c<postTitle.length-1;c++){for(var d=c+1;d<postTitle.length;d++){if(a=="titleasc"){if(postTitle[c]>postTitle[d]){b(c,d)}}if(a=="titledesc"){if(postTitle[c]<postTitle[d]){b(c,d)}}if(a=="dateoldest"){if(postDate[c]>postDate[d]){b(c,d)}}if(a=="datenewest"){if(postDate[c]<postDate[d]){b(c,d)}}}}}function displayblogindex(a){var b=0;var c="";var d="Post Title";var e="Sort by post titles";var f="Published";var g="Click to sort by date published";var h="Label";var i="";if(sortBy=="titleasc"){e+=" (Newest first)";g+=" (Newest first)"}if(sortBy=="titledesc"){e+=" (Oldest first)";g+=" (Oldest first)"}if(sortBy=="dateoldest"){e+=" (Oldest first)";g+=" (Newest first)"}if(sortBy=="datenewest"){e+=" (Oldest first)";g+=" (Oldest first)"}if(postFilter!=""){i="Show all blog posts"}c+="<table>";c+="<tr>";c+='<td class="blogindex-header-col1">';c+='<a href="javascript:toggleTitleSort();" title="'+e+'">'+d+"</a>";c+="</td>";c+='<td class="blogindex-header-col2">';c+='<a href="javascript:toggleDateSort();" title="'+g+'">'+f+"</a>";c+="</td>";c+='<td class="blogindex-header-col3">';c+='<a href="javascript:allPosts();" title="'+i+'">'+h+"</a>";c+="</td>";c+="</tr>";for(var j=0;j<postTitle.length;j++){if(a==""){c+='<tr><td class="blogindex-entry-col1"><a href="'+postUrl[j]+'" title="'+postSum[j]+'">'+postTitle[j]+'</a></td><td class="blogindex-entry-col2">'+postDate[j]+'</td><td class="blogindex-entry-col3">'+postLabels[j]+"</td></tr>";b++}else{z=postLabels[j].lastIndexOf(a);if(z!=-1){c+='<tr><td class="blogindex-entry-col1"><a href="'+postUrl[j]+'" title="'+postSum[j]+'">'+postTitle[j]+'</a></td><td class="blogindex-entry-col2">'+postDate[j]+'</td><td class="blogindex-entry-col3">'+postLabels[j]+"</td></tr>";b++}}}c+="</table>";if(b==postTitle.length){var k='<span class="blogindex-note">Populated '+postTitle.length+" blog posts<br/></span>"}else{var k='<span class="blogindex-note">Out of '+postTitle.length+" blog posts, the Label '";k+=postFilter+"' has only "+b+" posts<br/></span>"}blogindexdiv.innerHTML=k+c}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayblogindex(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayblogindex(postFilter)}function showblogindex(){if(blogindexLoaded){displayblogindex(postFilter);var a=document.getElementById("blogindexlink")}else{alert("Please wait... Populating an HTML Sitemap...")}}function hideblogindex(){var a=document.getElementById("blogindex");a.innerHTML="";var b=document.getElementById("blogindexlink");b.innerHTML='<a href="#" onclick="scroll(0,0); showblogindex(); Effect.toggle('+"'blogindex-result','blind');"+'">» Show an HTML Sitemap</a> <img src="data:image/gif;base64,R0lGODlhHAALAKIAAP/////MAP+ZAP8AAMwA/wD/AAAz/wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/nZERU1PIFZFUlNJT04gOiBCdWlsdCB3aXRoIGFuIFVOUkVHSVNURVJFRCBjb3B5IG9mIEdJRiBNb3ZpZSBHZWFyIDIuNg0KZnJvbSBnYW1hbmkgcHJvZHVjdGlvbnMgKGh0dHA6Ly93d3cuZ2FtYW5pLmNvbSkuACH+HUdpZkJ1aWxkZXIgMC4yIGJ5IFl2ZXMgUGlndWV0ACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/mqMJSerVLpxLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/kqIJSerVDpxLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/iqEJSerVLpwLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/qqUJSerVLpyLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/sqYJSerVDpzLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/oqQJSerVDpyLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/sqYJSerVDpzLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/qqUJSerVLpyLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/iqEJSerVLpwLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTACH5BAUKAAAALAAAAAAcAAsABwNCCLrc/kqIJSerVDpxLK9gR3VYdIjfqX6hJJpsR1Zk7VpAnJ6Tro893gwmC+I+RJBLhtJEnDmOaqbMvSBKaKME6XoTADs="/>'}var postTitle=new Array;var postUrl=new Array;var postDate=new Array;var postSum=new Array;var postLabels=new Array;var sortBy="datenewest";var blogindexLoaded=false;var numChars=250;var postFilter="";var blogindexdiv=document.getElementById("tp_blogindex");var totalEntires=0;var totalPosts=0;document.write('<a href="https://www.techprevue.com/sitemap-by-labels-blogger/" target="_blank" rel="nofollow noopener noreferrer">Add an HTML sitemap to your blog</'+'a>');</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadblogindex" type="text/javascript"></script>
<style>
#tp_blogindex{border:0px solid #000; background:none; padding:5px; width:99%; margin-top:10px}
.blogindex-header-col1, .blogindex-header-col2, .blogindex-header-col3{background:rgb(255,153,0); padding-left:5px; width:45%}
.blogindex-header-col2{width:15%}
.blogindex-header-col3{width:40%}
.blogindex-header-col1 a:link, .blogindex-header-col1 a:visited, .blogindex-header-col2 a:link, .blogindex-header-col2 a:visited, .blogindex-header-col3 a:link, .blogindex-header-col3 a:visited{font-size:120%; font-family:Arial; text-decoration:none; color:#fff; font-weight:bold}
.blogindex-header-col1 a:hover, .blogindex-header-col2 a:hover, .blogindex-header-col3 a:hover{font-size:120%; text-decoration:underline; font-weight:bold}
.blogindex-entry-col1, .blogindex-entry-col2, .blogindex-entry-col3{padding-left:5px; font-size:100%}
</style>

Warning: Don’t publish this code using the Compose view. Otherwise, it will not work.

Create an HTML sitemap page and publish

You can disable comments on the sitemap page. This option is given under the Options menu given on the right sidebar. The final step, publish the page.

Step 2. Add HTML Sitemap Page to the Main Menu

You need to add this HTML sitemap to the perfect location, where your readers can access it easily. You can place it on the main menu, sidebar, or footer. We are adding this page to the main for easy access.

Navigate to the Layout menu given on the left sidebar.

There you can add the Pages gadget where you want.

We are adding the Pages gadget to the page list (top).

Add an HTML sitemap page to blog

Click on the Edit pencil. A pop-up box will open, you see the created “HTML Sitemap” page. Tick the check box to add this to the main menu.

Add an HTML sitemap page to blog

It appears on your blog like this.

An HTML sitemap on blogspot

I believe you and your readers will get benefited from this HTML sitemap. Don’t forget to share this post with your blogger friends.

Previous articleHow to Enable Input Tools in Gmail to Type in Hindi and Other Languages?
Next articleHow to Hide Status Message on Blogspot – Blogger Guide
Vinay Prajapati
A digital marketing scholar by choice and tech-savvy by habit. A NIFT Alumni who's consulting and nurturing many fastest growing businesses and blogs.

4 COMMENTS

  1. Hi Vinay..
    Nice post. and thanks for sharing this informative technique to another bloggers to create the xml sitemap for user…and best way of presentation…!!

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.