Monday, 15 December 2014

Add Table of Content or Sitemap in Bloggers Blog (7 Types)

Display all your Posted article in effective and ease way for readers to navigate through your articles. Seven different types of TOC has been provided.

Add Table of Content or Sitemap in Bloggers Blog

Table of content or effectively called site-map of your blog gives your readers a navigation platform that is designed for them to go through their required topic much easily. Blogger does not provide such kind of widget but it can be externally added. There different types of table of content widget that are available over various widget providing blogs, out of which I have selected few and compiled them in one place for you.

Some of the widget do provide different options included, and some of them don't. In this article we will be discussing these different TOC and their pros & cons. The installing method is common for all of them.

How to add below TOC's in your bloggers blog ?
Go to pages > Click on new page
Now click on HTML and add any one of below code inside it. To increase effectiveness of the sitemap make sure to disable comment on that page and hide your sidebar if you have one. Also make sure to replace our blog link with your blog link whenever you find it in the code.

We have also added are Recommendation Index (RI), where 1 being the lowest recommended number and 5 being the highest recommended number.

5 = Highly recommended
1 = Not recommended

1: Sorted - Table of content : RI Score - 2.5

Add Table of Content or Sitemap in Bloggers Blog

Pros : 
All articles are shown in single page.
Labels are clickable and allow user to see topic that are also labelled with that label.
Easy navigation.
Light weight.
Can be Sorted by dates, labels and alphabetically.

All article are shown in single page, this method will be in serious question if total numbers article posted exceed hundred in numbers.
How to Navigate ?<br />
<br />
<ul style="text-align: left;">
<li>Click on <span style="color: red;"><i>Post Title</i></span> to sort articles Alphabetical</li>
<li>Click on <span style="color: red;"><i>Date</i> </span>to sort articles as per their posted dates.</li>
<li>Click on any <span style="color: red;"><i>Label</i></span> to see Other's article tag with that particular label.</li>
<li>To see all posts click on <span style="color: red;"><i>Label Tab</i></span></li>
<br />
<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style>#bp_toc{background:0 0;width:100%;color:#999;margin:0 auto;padding:5px}.toc-header-col1{padding:15px!important;line-height:15px;background-color:#e86060;width:250px;}.toc-header-col2{padding:15px!important;line-height:15px;background-color:#373737;width:75px;}.toc-header-col3{padding:15px!important;line-height:15px;background-color:#377ef0;width:125px;}.toc-header-col1:hover,.toc-header-col2:hover,.toc-header-col3:hover{opacity:.9}.toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:15px;text-decoration:none;color:#fff;font-family:Raleway;font-weight:400;letter-spacing:.5px}.toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none}.toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px;font-size:92%;}.toc-entry-col1:hover,.toc-entry-col2:hover,.toc-entry-col3:hover{background: #E7F7FA;}.toc-entry-col1:nth-child(even),.toc-entry-col1:nth-child(odd),.toc-entry-col2:nth-child(even),.toc-entry-col2:nth-child(odd),.toc-entry-col3:nth-child(even),.toc-entry-col3:nth-child(odd){padding:10px;font-size:92%}.toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{text-decoration:none;color:#666}.toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#000;text-decoration:underline}span.toc-note{padding:10px;margin:10px 0;display:inline-block;background:#fff;color:#666}#bp_toc table{width:100%;margin:0 auto;border-collapse:collapse;border-spacing:0;border-color:transparent}#bp_toc tr:nth-child(even){background:#fafafa}#bp_toc tr:nth-child(odd){background:#fff}#secondarybpart{display:none}#primarybpart{width:100%}.entry-content td {
border-top: 0px;}</style>

2: Searchable TOC : RI score - 3

Add Table of Content or Sitemap in Bloggers Blog

Pros :
Shown only certain numbers of article in a page.
Search options provide.
Article can also be sorted by selecting label.
Updated article can also be known with help of this TOC.
It provide "load more" article options which come in handy when article are more in numbers.

When search options are used the result are shown in alert dialog box which can be annoying for some people.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="table-outer"><table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher"><input type="text" /></form></td></tr>
</tbody></table></div><header id="resultDesc"></header><br />
<ul id="feedContainer"></ul><div id="feedNav">Loading...</div><script src="" type="text/javascript"></script><br />
#table-outer table {width:100%;margin:0;padding:0;}
#table-outer input, #table-outer select {padding:4px;font:inherit;border:2px solid #ecf0f1;width:170px;box-sizing:border-box;}
#table-outer select {cursor:pointer;outline:none}
#table-outer input:focus{outline:none}
#resultDesc {margin-bottom:10px;}
#feedContainer {overflow:hidden;margin-top:20px;}
#feedContainer strong {font-size:10px;}
#feedContainer, #feedContainer li {padding:0;margin:0;list-style:none;}
#feedContainer li {float:left;margin-bottom:10px;position:relative;z-index:0;}
#feedContainer .inner {padding:8px;margin: 0 5px;position:relative;background-color:#fff;border:1px solid #f9f9f9;height:133px;}
#feedContainer img {float:left;margin: 0 8px 0 0;max-width:100%;border:1px solid #f9f9f9;padding:2px;}
#feedContainer .toc-title {max-height:33px;overflow:hidden;}
#feedContainer .toc-title:hover {text-decoration:underline;}
#feedContainer .news-text {font-size:11px;}
#feedNav a, #feedNav span {display:block;text-align:center;color:#fff;
text-decoration:none;background-color:#444;padding:5px;width:95%;margin: 0 auto;transition:all 0.3s linear;}
#feedNav a, #feedNav span:hover {background-color:#333;transition:all 0.3s linear;}
#feedContainer .date {display:none;position:absolute;bottom:0;right:0;background-color:transparent;color:#fff;font-size:9px;padding:3px 2px;width:35px;}
#feedContainer .date .dd {font-size:9px;line-height:5px;font-weight:bold;}
#feedContainer .date span {display:inline-block;line-height:5px;text-align:center;

3: Searchable Version - 2 TOC : RI score - 3

Add Table of Content or Sitemap in Bloggers Blog

In this TOC the cons of above TOC has been removed, also it does provide "load more" options in next article fashion for more try using on your blog.
<div class="eu-outer" id="eu-outer"><table border="0"><tbody><tr><td><label for="eu-feed-order">Sort articles by:</label></td><td><select class="eu-feed-order" id="eu-feed-order"><option value="published" selected="selected">New Post</option><option value="updated">Post Updated</option></select></td></tr><tr><td><label for="eu-label-sorter">Filter posts by category :</label></td><td><select class="eu-label-sorter" id="eu-label-sorter" disabled="disabled"><option selected="selected">loading...</option></select></td></tr><tr><td><label for="eu-feed-searcher-text">Search by keyword:</label></td><td><form class="eu-feed-searcher" id="eu-feed-searcher"><input type="text" class="eu-feed-searcher-text" id="eu-feed-searcher-text" autocomplete="off"></form></td></tr></tbody></table></div><div class="eu-result-description" id="eu-result-description"></div><ul id="eu-feed-container" class="list-media eu-feed-container"></ul><div class="eu-feed-nav" id="eu-feed-nav"></div><script src=""></script>
<style>.eu-outer table{margin:0}.eu-outer input,.eu-outer select{font:inherit;border:2px solid #e5e5e5;padding:4px;width:65%}.eu-outer label{display:block;font-weight:700;padding:6px;margin:6px 4px 0 0}.eu-feed-container{overflow:visible}.eu-outer td{padding:2px}.eu-feed-container li{list-style-type:decimal;margin-bottom:17px;padding:10px}.eu-feed-container li:first-child{border-top:none}.eu-thumbnail{float:left;margin:0 20px 0 0;display:none}.eu-summary{display:none}.eu-inner a{color:#555;font-size:17px;line-height:20px}.eu-inner a:active,.eu-inner a:focus,.eu-inner a:hover{text-decoration:underline}.eu-description-message{display:block;margin-top:17px;padding:10px 12px;font-weight:700;color:#000;text-align:center}.eu-feed-nav{margin:30px 0px 0}.eu-feed-nav span{cursor:wait}.eu-feed-container li:hover {background-color: #F7F7F7;width:96%}</style>

4: Tabbed TOC: RI score - 4.8

Add Table of Content or Sitemap in Bloggers Blog

All article are present in single which makes it very very to search topic.
All article are distributed according to labels.
This Table of content is very responsive as well.(Mobile friendly)
Summary can be enabled inside the javaScirpt.(Download this JavaScript for more features)

nill so far.
<div id="tabbed-toc"><span class="loading">Loading...</span></div><script type="text/javascript">var tabbedTOC = {blogUrl:"", containerId: "tabbed-toc", activeTab: 1};</script>
<style>#tabbed-toc{margin:0 auto;background-color:#fff;position:relative;color:#333}#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 10px/normal Helmet,Freesans,Sans-Serif;color:#fff}#tabbed-toc li,#tabbed-toc ol,#tabbed-toc ul{margin:0;padding:0;list-style:none}#tabbed-toc .toc-tabs{width:20%;float:left}#tabbed-toc .toc-tabs li a{display:block;overflow:hidden;text-overflow:ellipsis;color:#000;text-decoration:none;padding:9px;cursor:pointer}#tabbed-toc .toc-tabs li a:hover{background-color:#D85252;color:#fff}#tabbed-toc .toc-tabs li{background-color:#343434;color:#fff;position:relative;z-index:5;margin:0 -1px 0 0}#tabbed-toc .divider-layer,#tabbed-toc .toc-content{width:80%;float:right;background-color:#fff;border-left:5px solid #343434;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0}#tabbed-toc .panel{position:relative;z-index:5}#tabbed-toc .panel li a{display:block;position:relative;font-size:15px;color:#000;line-height:20px;padding:12px;text-decoration:none;outline:0;overflow:visible}#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:400;font-size:10px;color:#666;float:right}#tabbed-toc .panel li .summary{display:block;padding:10px 12px;font-style:italic;border-bottom:2px solid #888;overflow:hidden}#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}#tabbed-toc .panel li:nth-child(even){background-color:#eee}#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:hover time{text-decoration:underline;outline:0}@media (max-width:700px){#tabbed-toc .toc-content,#tabbed-toc .toc-tabs{overflow:hidden;width:auto;float:none;display:block}#tabbed-toc .toc-tabs li{display:inline;float:left}#tabbed-toc .toc-tabs li a,#tabbed-toc .toc-tabs li{border:1px solid #eee}#tabbed-toc .toc-tabs li{background-color:#343434;color:#fff}#tabbed-toc .toc-content{border:none}#tabbed-toc .divider-layer,#tabbed-toc .panel li time{display:none}}
<script src=""></script>

5: List type of TOC : RI score - 2.0

Add Table of Content or Sitemap in Bloggers Blog

All article are present in single page labelled with respective labels.

If numbers of article runs in hundred then the page of the site-map will increase.
No features are Added in this TOC
<script src=""></script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=1000&amp;callback=loadtoc" type="text/javascript"></script>

6: Summary TOC : RI score - 4.5

Add Table of Content or Sitemap in Bloggers Blog

All article are present in single page
All article can be sorted according to labels
Small summary can be seen in TOC

nill so far
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>
<script type="text/javascript">
var cl_summlen = 500,
    timepub    = "Posted Date",
    ptitle     = "Article title",
    sortby     = "Sort by:",
    labelsort  = "Filter articles by label:",
    showall    = "View All",
    hidesum    = "Hide Summary ...",
    showsum    = "Show Summary ...",
    footlabel  = "category:",
    footon     = "in",
    showlabel  = "See posing with label";
<script src=""></script>
<script src=""> </script>

7: Accordion table of content : RI score - 4.7

Add Table of Content or Sitemap in Bloggers Blog

All article are sorted respective to their label.
Topic are distributed according to labels
Mobile friendly.

Nill so far
<div id="table-of-content" class="table-of-content"><span class="loading">loading...</span></div>
<style type="text/css">.table-of-content{background-color:#fff;color:#999;margin-bottom:5px;-webkit-box-shadow:0 1px 2px #000;-moz-box-shadow:0 1px 2px #000;box-shadow:0 1px 2px #000;overflow:hidden}.table-of-content .toc-header{margin:0;padding:10px 15px;overflow:hidden;cursor:pointer;font:inherit;color:#000;border-top:1px solid #fff;border-bottom:1px solid #ddd;background-color:#f5f5f5}.table-of-content{color:#fff;border-top:1px solid gray;border-bottom:1px solid #1f1f1f;background-color:#313131}.table-of-content .loading{display:block;padding:10px 15px;text-decoration:blink}.table-of-content ol{margin:0;padding:0;list-style:none}.table-of-content li{margin:0;padding:5px 5px 5px 15px;text-align:left;overflow:hidden;border-bottom:1px solid #e5e5e5}.table-of-content li:first-child{border-top:none}.table-of-content li:last-child{border-bottom:none}.table-of-content a{color:#5687f8;text-decoration:none}.table-of-content a:hover{text-decoration:underline}.table-of-content a:visited{color:#5687b8}.credit-link{text-align:right;margin-right:2px}</style>
var toc_config = {
    url: '',
    containerId: 'table-of-content',
    showNew: 10,
    newText: ' - <strong style="font-style:italic;color:red;">New</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    slideEasing: {
        down: null,
        up: null
    slideCallback: {
        down: function() {},
        up: function() {}
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
<script src=""></script>

Note that i haven't included any steps regarding extra feature of any TOC methods. Therefore if you want to download the JavaScript fell free to download it. You can download all JavaScript and modify according to your will but make sure to give due credits to the creator Taufik Nurrohman 

NOTE : I will be keep updating this article for such like keep visiting. If you face any problem regarding add any of above Table of content, just comment

54 Discussion

  1. Very nice post. I wanted to display all the posting under certain Label. do you have any that does that? Thanks!

    1. In TOC 1, replace second script with below code.
      <script src="/feeds/posts/default/-/YOURLABEL?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
      In table of content 6 replace last script code with below one.
      <script src="">
      Make sure to add BLOGNAME and YOURLABEL
      You can use TOC like Searchable Version - 2 or Tabbed TOC since they do allow you readers to see all post under particular label. 8-|

    2. hello admin :) i have one question. I would like to have a list of post on my page without labels .. can you make it for me? Just the title of the post in alphabetically order. Thanks admin! :)

  2. please give me review about my blog

    1. Please try some different template, though your content is greats keep it up. :victory:

  3. Hi Tushar,
    I like your number 2: "Searchable TOC" .
    It is the only that lists results with thumbnails but it has a serious bug that makes it almost unusable: I am speaking about a bug on the "category..." menu that makes the page freeze.:

    When the category menu shows "CATEGORY..." it shows results from all the labels.
    After you can change it to a label and it will show results from that specific labels.
    If after that label you change it back to "CATEGORY...", (in order to get results from all the labels) then the website page will freeze (and the script also).
    You can see this happening on my page:
    This is very inconvenient because the visitor will leave your website.
    Can you imagine what could cause this problem? May be it is a small fix on the script.
    Kind Regards!

    1. Hi Epoca,
      Try this, in your JavaScript search for this code <option value='' selected>CATEGORY...</option> and replace with the following code <option value='' selected disabled>CATEGORY...</option> To reset and view the new post sort using ""New post" or "Post updated" options or try TOC 3.
      Hope this works for you. :cool: :D

    2. Excellent!!!
      It works flawlessly with this line.
      I would appreciate if you can help me with this also: in my blog I have disabled the blogger comments so in the results of your search engine I see the word Undefined typed besides every post result.
      May be there could be a way to disable this "Undefined" word from appearing.
      Thank you Tushar!

    3. Delete the following code in your JavaScript :arrow: <strong> - ("+n+")</strong> I think that should solve the problem. (Y) ;-)

    4. Congratulations. I deleted that code and now I do not get the word "undefined" in the search results. Your information to customize the search engine is mostly valuable. Best!

  4. Sorry for all this deleted comments, I had questions, thanx, admiration to express....I LOVE THIS! If you had ads I would click all day...and for what you've done, not for what I am asking now....Can you tell me what is that and how to solve it

    I keep having problem with TOC 2. When choosing category, even when there is more to load, on "load more" click I get pop up "No results" and then it starts mixing the categories..(here it is: Can you help me? :?:

  5. Great tutorial, nice and simple. Implemented it on my blog
    Thanks m8 :)

  6. Wow nice and its work for me. Thank you.

  7. Thanks tushar, i am searching it from many days. you are great. thank you so much....

  8. About 4: Tabbed TOC: RI score - 4.8
    When I click on the posts it opens the post in another window, how can I change it to open the post in the same window?

  9. I have added TOC 4 but I cannot get it to work. It works if I do not change the URL in the code to my own. But when I change it to my own, it keeps "loading" and nothing happens. What do I miss? Can it be my blogspot settings?

    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.

  10. Very helpful post! Thank you. Just one question. How can I get rid of the blue "Labels" column in the first example? I only require the first two columns.

  11. great tutorial i have seccesfuly add TOC at my blog....

  12. Hi Tushar,

    I really like TOC 6.

    Please, I have a few requests regarding the design of the TOC...
    1. entry to display in normal type face, i.e. not bold.
    2. remove the display of category under each post.
    3. no line space between each entry.

    Are these achievable? Thanks in advance.

    Best wishes,

    1. Hi Rudi, i have sent you the code in your email account since the code is quite big. If you face any problem just let me know. :P :victory:

    2. day 99999 still finding a way to make only specific label available to selected there not showing All..haha

  13. 6: Summary TOC : RI score - 4.5

    I would like it to show on certain

    1. I think that would quite difficult for me to do, since it uses loop codes in JavaScript. :(

  14. serchable TOC is not working help me :""Filter posts by category : " keep loading

  15. can you hide / delete the comment number ?
    3: Searchable Version - 2 TOC : RI score - 3..
    thanks :)

  16. Hi Tushar,

    I am trying to use it on my website but it only shows loading... and nothing else.

    Please help me out my website is Government job in India and I am trying to use 4: Tabbed TOC: RI score - 4.8.

    PS: I have nearly 500 articles.

  17. Thank you, your tutorial successful :)

  18. On TOC6 how to start list in Alphabetical order first and not newest post?

  19. It doesn't work. js file is offline

    1. Likewise having problems. Possibly something to do with the script and the way Google has changed the way it handles http and https.

  20. Thanks a lot for this... Is there a way to make a TOC for when one writes a long article and wants to make it easier for the audience to navigate through??

  21. Thanks a lot for this... Is there a way to make a TOC for when one writes a long article and wants to make it easier for the audience to navigate through??

  22. Is there a way to get this to work now that the code does not work? All I get is loading...

  23. This comment has been removed by the author.

  24. This comment has been removed by the author.

  25. Hey, Just Loading in My Blog >> ADDALOKER SITE <<
    For >> 7: Accordion table of content : RI score - 4.7
    HELP ME? LINK >>> [addaloker][dot][tk]/[p]/[daftar-isi_99][dot][html]

  26. This comment has been removed by the author.

  27. none of them works anymore, because JavaScripts can't be loaded from
    please update the codes

  28. Indicates whether controls in this form can by default have their values automatically completed by the browser.

    web designing training in chennai

  29. not working ... !!! please give the right address

  30. Hii Tushar Sharma. What the highlight code that you use? I interest with it, thanks :D

  31. please fix it

  32. Hello all,
    I just one of them, then my question is, how to make Table of content of few blogger.

    Ex: Blog1, blog2, blog3, display in 1 Table/html page on different location (Wp or Joomla)

    Pls Need your help thanks .....

  33. these codes are not working

  34. Too bad all javascript uploaded to googlecode was dead .. Please give us the js code instead of a link

  35. javascripts are not there
    please update

  36. Really it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
    Android Training in Chennai
    Ios Training in Chennai

  37. Really it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
    Android Training in Chennai
    Ios Training in Chennai

  38. i want to know how to display table of content in blogger,,
    this is my blog..

  39. Thanks for the info...

    Real Trainings provide both IT-Training Institutes and Non-IT Training institutes information in Hyderabad, Bangalore, Chennai . Here students can Compare all Courses with all detailed information. In Real trainings we provide institutes like Aptitude & Reasoning, Groups Trainings, Bank Coaching, IIT Coaching, UPSC training, SSC Coaching, GPS Infotec, Eduwizz online training, Akshara Technologies, Spark Trainings, Visualpath etc...


Note : All comments will be moderated. Do Not Spam.