How to Create a Sitemap or Table of Contents in Blogger

One of the limitations of a blog is that it doesn't have an index or sitemap of the site to make it easier for readers to find the content that they are searching for. While the blog archive and labels have all the information about the published post, these do not appear on a single page completely, so searching for more posts is not always easy.

Luckily, this gadget will help you to add a table of contents or sitemap on Blogger showing the index of all posts separated by categories that have been published. It will also show the latest posts with a text saying New!

table of contents, sitemap, blogger

Demo: You can see it in action by clicking here.

How To Add a Sitemap with a List of Posts to Blogger

To implement it on your blog, follow the steps below:

Step 1. Login to your Blogger Dashboard and select your blog

Step 2. Go to "Pages" > click the "New Page" button.

Step 3. Click on the HTML tab and paste the following code inside the empty box:
<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://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</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/AVvXsEielIkIpsTZnVwhlvPrJeg-XyDZeG-i7pQdkGW0U1H2uWaSoSQO8HQDzxHk3L0FWEdlLj2rcMHae-hJFrQrY-mBAJhwduS1M-WuThyphenhyphenXDc0pqjWMNb52IEbVPZtVMD7WesL-odrwqOZrJ3de/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://helplogger.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
After adding the above code, replace http://helplogger.blogspot.com with the address of your blog.

How to Customize the Sitemap for Blogger

  • to change the color and font size of categories title, replace the values in red
  • to change the color of the links, replace the value in green
Step 4. Click "Options" on the right side of the post editor and select "Don't allow, hide existing" for the Reader comments.

Step 5. Finally, click the "Publish" button and see the page. That's it!

The index of the posts is sorted alphabetically and is updated automatically each time a new post is published.

34 comments:

  1. Great post ...you remove this limitation from blogger...

    ReplyDelete
  2. Table of contents are the good way to navigate visitors through a single page to their required post. Good work, keep sharing.

    Regards,

    Divya @smtutorial

    ReplyDelete
  3. i want table of contents only for a selected label.. plz help

    ReplyDelete
  4. Please help me my sitemap does not appear and just one link appears gt this widget and that takes me to your site

    ReplyDelete
  5. I tried everything and its always blank even with new posts?

    ReplyDelete
  6. Though this concept works-I just use an rss widget with a slider to show my most recent posts
    And a search at the top-I get amazing #'s of page views that way.

    ReplyDelete
    Replies
    1. Hi, can you please explain how exactly you achieve that? (step by step idiot proof instructions)
      Many thanks

      Delete
  7. Wow, what a smart and cool feature! Thank you, using it now as well!

    ReplyDelete
  8. not wroking on my site, shows nothing, what to do??

    ReplyDelete
  9. first, it works, but not at all later, i don't know why ?

    ReplyDelete
  10. This works.. but i realized if you use many labels in a post it will also listed multiple times in sitemap. Is there other way to limit it?

    ReplyDelete
  11. Is there a way to only show specific labels in this? I'm thinking of putting it into an Author Page to show only their articles rather than a sidebar widget. If there is a different way to accomplish that can you advise? TIA

    vindictustrix.blogspot.com

    ReplyDelete
  12. Hey!
    I tried to do this to my blog, but I am getting an empty page instead. When I tried without replacing your page's url (helplogger.blogspot.com), I got your blog's sitemap as the result. Can you help me to fix it?

    ReplyDelete
    Replies
    1. @Vibhu you must replace "helplogger.blogspot.com" with your own blog url... :D

      Delete
  13. not working for me bro its just blank post after publish

    ReplyDelete
  14. Nice! I love it.. Do I need to show it in the menu o just make it invisible?

    ReplyDelete
  15. Excellent!
    Only one of the many that I have tried!
    Thank you very much Sir!

    ReplyDelete
  16. Hello!
    THANK YOU very much!!
    works perfectely !
    I've been searching so long to do EXACTELY that.

    ReplyDelete
  17. Sorry to inform that, maybe it's no longer working. Something could be changed that's why the code doesn't work at all :(

    Is there any update please?

    ReplyDelete
    Replies
    1. May be the problem is with your tagging or customized template.
      It worked fine for me though I write in my own native language as here - http://hadageepotha.blogspot.ae/p/p.html

      Delete
  18. I have Tried for my blog Referguru Thanks for your Hellp

    ReplyDelete
  19. Not working for me either :( Is it because I'm using s Dynamic template?

    ReplyDelete
  20. Hello !
    Why it does' nt work on my blog !
    It as just worked at the beginning and after there is nothing link on the page ?

    Help please,
    Thanks a lot for your replay

    ReplyDelete
    Replies
    1. Delete the text that you copied from the original site. Copy it again from original site and paste it back. Make any modification you want and then update one time. If you want to make more modification it will not work you will have to go back delete everything and start again from original source, modify as you wish and update. Updating twice makes it not show.

      Delete
  21. its not working on my blog
    www.shaheendemo1.blogspot.com/p/p.html

    ReplyDelete
    Replies
    1. @ Tiger Qasim Make sure that you select the HTML pan/editor not the compose pan and past it inside.

      Delete
  22. I noticed that this sitemap only capture Labels, Please how can I make my posts (and pages) appear just like the sitemap you created here? because is not all the post that i labeled as a result I only see the labels only.

    ReplyDelete
  23. Is there anyway to only list selected labels?

    ReplyDelete