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 that could make it easier for readers to find 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 working 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 and select Blank page


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://bloggerchive.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/AVvXsEjEu96CeOP9KUT64YcLHuAVcSRYGzxYVsyJ4pzt7QpZW9LpNbaib3nXhOGDkaXOFPKd7FSyaI6XhAL78GMkT8D8QtQ3F4CBUcfxUnOVjZH73GAwQ9nj4M1FrNH743clUkUeQhmmBqGu9Dwn/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://bloggerchive.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
After adding the above code, replace http://bloggerchive.blogspot.com with the address of your blog.

Customization:

- 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 and select Don't allow (hide existing) for the reader's comments

Step 5. Finally, click the Publish button and View the page.

That's all!
The index of the posts is sorted alphabetically and is updated automatically each time a new post is published.

Comments/disqusion
33 comments

  1. says:

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

  2. says:

    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

  3. says:

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

  4. says:

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

  5. says:

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

  6. says:

    How can i add a category ??

  7. says:

    It works! Thank you so much! :)

  8. says:

    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.

  9. says:

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

  10. says:

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

  11. says:

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

  12. says:

    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?

  13. says:

    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

  14. says:

    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?

  15. says:

    Awesome

  16. says:

    not working for me bro its just blank post after publish

  17. says:

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

  18. says:

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

  19. says:

    Bro Not Working.........

  20. says:

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

  21. says:

    it didn't work for me.. :(

  22. says:

    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?

  23. says:

    I have Tried for my blog Referguru Thanks for your Hellp

  24. says:

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

  25. says:

    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

  26. says:

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

  27. says:

    @kelsey Having same problem.

  28. says:

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

  29. says:

    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.

  30. says:

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

  31. says:

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

  32. says:

    don't work man(

  33. says:

    Is there anyway to only list selected labels?