How To Create Table Of Content Or Sitemap Page In Blogger Blog

How to create table of content or sitemap in blogger

Table of content called as "sitemap" of your blog provides your blog readers a steering platform that is designed for them to go through their much required topic much easily. Blogger does not provide such kind of widget but it can be externally added. While the blog archive and labels have all the information about the published post, these do not appear on a single page completely hence searching for more posts is not always easy.



Here is a gadget through which you can add a "table of content (sitemap)" on blogger blog showing the index of all posts separated by categories that have been published. This widget will also mark as ‘New!’ or the latest post published on your blog.

To add this great widget to your blogger blog, follow the below instructions,

Also Read:    How To Put Ad-Sense Ads Inside The Blogger Post

How To Add Table Of Content (Sitemap) To Blogger Blog?


Step 1:

Login to your Blogger Dashboard and select your blog.

How to create table of content or sitemap in blogger


Step 2:

Go to "Pages" > Click on > "New page" and paste the following code inside the HTML blank page.

<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://www.pagetowatch.com/2016/08/how-to-create-and-add-table-of-content-sitemap-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="http://1.bp.blogspot.com/-_VZwBpHw_SI/UrXvLbFxacI/AAAAAAAAFiQ/ZGqWZUZesCI/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://www.pagetowatch.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>


How to create table of content or sitemap in blogger

After adding the above code, replace http://www.pagetowatch.com with the address of your blog.

Customization


  • To change the colour and font size of categories title, replace the values in red.
  • To change the colour of links, replace the value in green.

Step 3:

Now click options on the right side and select "Don’t allow, hide existing" (shown in above screen shot) for the reader comments.

Step 4:

Finally click the "Publish" button and view the page. You have done all.

If you want to add this sitemap or table of content to your blog’s footer page follow the below instructions,

Also Read:    How To Generate Blogger Sitemap And Update It In Google Webmasters 

How to add sitemap or table of content to footer?

1.  Go to Blogger dashboard > "Layout" > "Add a Gadget" as shown below,

  • How to create table of content or sitemap in blogger

2.  Copy the below code and paste it to blank page as shown below,


a href="http://www.pagetowatch.com/p/blog-page_7.html">Sitemap</a>


How to create table of content or sitemap in blogger


3.  Replace the http://www.pagetowatch.com/p/blog-page_7.html with your sitemap page URL.

Note: To get your sitemap page URL simply go to "Pages" in your Blogger dashboard and click "View" and copy the URL as shown below,

How to create table of content or sitemap in blogger

How to create table of content or sitemap in blogger

4.  Now click on "Save" button. Link text to your blog’s table of content (sitemap) will be shown in footer on your blog home page. 

I will be very glad if you have learned “how to create sitemap in your blogger blog”. I hope above tricks explained are easy to understand and you can easily create table of content widget for your blog. For any technical help please feel free to comment below for more detailed understanding.
SHARE

PageToWatch

  • Image
  • Image
  • Image
  • Image
  • Image

17 Comments:

  1. Ӏ tгuly love үoսr blog.. Great colors & theme.
    Did you develop һis amazing site уourself? Please reply back as
    I'm tгying to create my oѡn site and ѡould love tօ find out where yⲟu got this from ᧐r whɑt thе theme is named.
    Apⲣreciate it!

    ReplyDelete
  2. This iis really interesting, You're a very skilled blogger.

    I have joined your rss feed and look forsard to seeking more of
    your fantastic post.Also, I have shared your website in my social networks!

    ReplyDelete
  3. Good post. I learn something totally new and challenging on websites I stumbleupon everyday.
    It will always be helpful to read articles from other
    writers and practice something from other sites.

    ReplyDelete
  4. Valuable information. Lucky me I discovered your
    site unintentionally, and I am shocked why this coincidence didn't took
    place in advance! I bookmarked it.

    ReplyDelete
  5. Definitely consider that which you said. Your favorite justification appeared to be on the internet the easiest
    thing to be aware of. I say to you, I definitely
    get irked even as folks think about issues that they just do
    not realize about. You controlled to hit the nail upon the highest as smartly as defined out the entire thing without having side-effects , folks can take a signal.
    Will likely be again to get more. Thanks

    ReplyDelete
  6. This excellent website certainly has all of the info I wanted about this
    subject and didn't know who to ask.

    ReplyDelete
  7. I just couldn't depart your site prior to suggesting that
    I really loved the usual information a person supply
    in your guests? Is going to be back frequently to check up on new posts

    ReplyDelete
  8. Wow, this post is pleasant, my sister is analyzing these kinds of things,
    thus I am going to inform her.

    ReplyDelete
  9. Please let me know if you're looking for a article writer for your weblog.

    You have some really good articles and I believe I would be a good asset.
    If you ever want to take some of the load off, I'd love to write some articles for your blog in exchange
    for a link back to mine. Please shoot me an e-mail
    if interested. Thank you!

    ReplyDelete
  10. If you would like to obtain much from this article
    then you have to apply these strategies to your won blog.

    ReplyDelete
  11. Nice blog here! Also your site loads up fast! What web host are you using?
    Can I get your affiliate link to your host?

    I wish my site loaded up as fast as yours lol

    ReplyDelete
  12. It's really very complicated in this active life to listen news on Television, thus I only use web for that reason,
    and take the latest information.

    ReplyDelete
  13. It's very trouble-free to find out any topic on web as compared to textbooks, as
    I found this article at this web site.

    ReplyDelete
  14. I really like what you guys are usually up too.
    Such clever work and reporting! Keep up the superb works guys
    I've added you guys to my personal blogroll.

    ReplyDelete
  15. I think the admin of this web page is genuinely working hard for his site, because here every
    stuff is quality based stuff.

    ReplyDelete
  16. Inspiring story there. What occurred after? Thanks!

    ReplyDelete
  17. There's definately a lot to find out about this topic.

    I like all of the points you've made.

    ReplyDelete