How to Create a Sitemap page or Table of Contents in Blogger

HTML Sitemaps are organized list of your published posts on blogger, it looks like a table of content. In this article, we will show you how to add an HTML sitemap page in Blogger

XML Sitemaps

An XML sitemap is created with the help of an XML markup language which is a web programming language and is specially made to be indexed in search engines. You can also create and submit your site's XML sitemap in webmaster tools, which now known with another name called Google Search Console, which will not only improve your site's crawling rate but also quick indexation of your site.

Also Read: How To Add Floating Share Buttons Gadget To Blogger?

HTML Sitemaps

On the other hand, HTML sitemaps are created with plain Hyperlink Text Markup Language which is a widely known and popular web programming language and are especially intended for your website visitors. It is usually used to list all the post or pages that are published on the blog.


As you know the blogger have many limitations, many of the limitation is that it lacks in index or sitemap. Well, shaving sitemap on the blog can increase your rate of getting Adsense approval. Html sitemaps on the blog help your visitors and readers to reach more posts which result in more page views. Although blogger gadgets like archive and labels [provide full information about the published posts they do not display all the post on one page which makes difficult for readers to find out a particular post.

You can easily add an HTML sitemap to your blog by following these simple steps.

1. Login to your Blogger account and Goto dashboard.

2.Click on Pages > New Page > Edit HTML and delete all the html code present in the page.

3.Add the following Line of Codes or Script in the page and Name the Page with Sitemap.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link">
<a href="http://letstalk786.blogspot.com/2018/01/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 12px; text-align:center;"><u>Create your own Sitemap Page</u></a></div>
')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="
<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>
";for(var g=0;g<postTitle.length;g++){if(a==""){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}}}h+="</table>
";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels">
<a href="/search/label/'+temp1+'">'+temp1+"</a></p>
<ol>");firsti=a;do{document.write("
<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>
");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4i79Izll3uUycOd3HF0uRZ0RBaqKcwv2zv1wQngF6CrANQghH5_gwdKPlt-WcCPb0VcKXNSmIpYX5sC835SilU2meP8LTDFRmCtq86ucN4lX96W0NmQwMhNQelmKaMmn6C1UZypWmBwus/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://letstalk786.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script></div>

4.Make a change of a domain name in Blue to your blog/website domain name.

Also Read: Hide or Show Widgets and Gadgets in Home, post, static, archive pages in Blogger

4.Do the page configuration as seen in the picture given below:-

5.Click on Theme > Edit HTML.

Now, we will add Some CSS code to our blogger template.

• Look At Demo

Also Read: How to Remove Showing Posts With Label in Blogger

6.Search for </b:skin> tag by pressing CTRL+F and past the CSS code just above it.

2. /* ----[Sitemap Page]----------by LetsTalk786 */
3. p.labels a {
4. font-weight:bold;
5. color:#485987;
6. font-size: 20px;
7. padding-left:0px;
8. border-bottom: 2px solid #ddd;
9. }
10. p.labels a:before {
11. height:40px;
12. padding-right:5px;
13. }
14. p.labels a:hover {
15. color:#1c8b78;
16. }
17. a.post-titles {
18. color: #242424;
19. padding-left: 20px;
20. }
21. a.post-titles:hover {
22. color:#ffb400;
23. }
24. ol li {
25. list-style-type:decimal;
26. line-height:25px;
27. }
28. 
    
29. li{
30.     text-align: -webkit-match-parent;
31. }
32. 
    
33. 
    
34. .sitemap-link {
35. font-size: 13px;
36. text-decoration:none;
37. color: #5146CD;
38. text-align: center;
39. padding-top: 20px;
40. }

Everything is done! test your new Sitemap Page.