How to create and add a HTML sitemap to bloggers blog

 How to create and add an HTML sitemap to bloggers blog

An HTML sitemap is a reader's friendly sitemap that allows readers to easily navigate your blog or website.it makes your blog easier for readers to search for keywords and label on your blog, it's also helpful for SEO. XML default sitemap can not be understood by the user, it is for search engine robots. Readers are considered first instead of focusing on search engine robots, that's why a Google SEO recommends an HTLM sitemap to enable the reader to navigate through your site with ease. People don't like wasting time in search of an article on your blog they want quick and efficient options. 

For easy navigation on your website or blog, today will be showing you how to create an HTML sitemap that will make your site readers friendly sorting posts in different ways. This HTML sitemap show blog post 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 in blogger

Step 1. Create a new blog page.

1.1 Login to your blog, on your dashboard, navigate to the page menu at the left side of your dashboard create a new page, and title it SITEMAP

1.2 Next switched for composers view to the HTML view then copy and paste the HTML code below

<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://besticoneasymoney.blogspot.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>

Also read :How to create a free website or blog
#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}

Also read :How to create and add a HTML sitemap to bloggers blog
.blogindex-entry-col1, .blogindex-entry-col2, .blogindex-entry-col3{padding-left:5px; font-size:100%}

</style>
  

Note:

 publishing this code in composers view will not work, make sure it's in HTML view before you publish it.

1.3 At the top right corner of the page click on settings, an option under readers comment click do not allow, hide existing. 

Step 2. Add HTLM sitemap page to your blog 

1.1 Add this page to your blog where readers can easily see it You can place it on the main menu, sidebar, or footer. We are adding this page to the footer many for easy access

1.2 Navigate to the Layout menu given on the left sidebar. We are adding the page to the menu footer

1.3 click on edit pencil, on the site name type in SITEMAP, on the URL copy the URL sitemap page link and paste it in the URL space.

1.4 Click save.

Your sitemap will appear like this on your blog or website 

Thanks for reading my blog post. If you find this post helpful let me know in the comment section and also subscribe to get my latest blog post any time I post new content.