Don't Miss

Add a Tabbed Table of Contents to your Blogger Blog

By Zohaib Liaqat - 19 Comments
A Table of contents(TOC) or a Sitemap is a place/page where all of your blog posts are arranged according to their categories. A table of contents allow your visitors to access all your posts from one page. As every one loves Easy Navigation, so by adding table of contents your visitors will get more interested after getting all posts on one page, in this way they'll spend more time on your blog and your blog Bounce Rate will also decrease. It also helps search bots to easily index your pages.

Recommended For You:
How to create a Sitemap/Table of Contents in Blogger
How to Add a Post Rating System in Blogger
How to Add a Forum to Your Blogger Blog

Today in this tutorial, we're going to share a tabbed table of contents for blogger. This widget is created by DTE. Some features of this table of contents are:

  • It automatically updates when you publish a post
  • It automatically tags your latest posts with a New! text
  • Arranges all your posts under their given categories
  • Has Beautiful layout and eye-catching colors

A live demo of this widget can be seen by clicking the below Demo button.
Add a Tabbed Table of Contents to your Blogger Blog

Add a Tabbed Table of Contents to your Blogger Blog

First and foremost, go to your Blogger Dashboard >> Select a Blog >> Pages and click New Page. Switch the Page Editor to HTML mode. Now Copy the below code and paste it there.

<link rel="stylesheet" href="" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="" title="Tabbed TOC">Learn More Cool Tricks - Blogolect</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "", // A "no thumbnail" URL
    monthNames: [ // Array of month names
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
<script type="text/javascript" src=""></script>


  • Replace with your Blog URL

Click Publish button and you're done!
Congratulations: You've successfully added a Add a Tabbed Table of Contents to your Blogger Blog.

We hope this article may have helped you in adding a sitemap/table of contents to your blogger blog. Share this article with your friends and don't forget to Join our Bloggers Forum on Facebook @


19 comments to ''Add a Tabbed Table of Contents to your Blogger Blog"

  1. Thank u. It is nice. can this be modified to horizontal tabs?

  2. Is there a way to alter this so that it only shows a single label?

  3. I was looking for table of contents for, any idea?

  4. This does not work anymore. The widget owner has to change http to https for it to work in blogger. Google is now blocking this widget because of that http.

  5. This comment has been removed by the author.

    1. This comment has been removed by a blog administrator.

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

  7. This comment has been removed by the author.

  8. nice content thank you for sharing this blog please approve our link
    Web design Company in Bangalore-WondersMind


    We Offer all types of Finance Business Personal Cash
    Quick Cash Advance. Fast Credit Check. Cash Today.
    Fast Cash Online
    low interest rate as low as 2%
    Financial Cash Available Here
    Business Personal Cash
    I'll advise All Cash seeker should contact us
    Contact Us At :
    whatspp Number +918929490461
    Mr Abdullah Ibrahim

  10. This comment has been removed by the author.


  11. I got my already programmed and blanked ATM card to withdraw the maximum of $1,000 daily for a maximum of 20 days. I am so happy about this because i got mine last week and I have used it to get $20,000. Mike Fisher Hackers is giving out the card just to help the poor and needy though it is illegal but it is something nice and he is not like other scam pretending to have the blank ATM cards. And no one gets caught when using the card. get yours from Mike Fisher Hackers today! *email: you can also call or whatsapp us Contact us today for more enlightenment +1(301) 329-5298

  12. Thanks for sharing this information. This is really useful. Keep doing more.
    Web Design Company in Delhi

  13. Are you tired of seeking loans and Mortgages, have you been turned down constantly By your banks and other financial institutions, We offer any form of loan to individuals and corporate bodies at low interest rate. If you are interested in taking a loan, feel free to contact us today, we promise to offer you the best services ever. Just give us a try,because a trial will convince you. What are your Financial needs? Do you need a business loan?Do you need a personal loan? Do you want to buy a car? Do you want to refinance? Do you need a mortgage loan? Do you need a huge capital to start off your business proposal or expansion? Have you lost hope and you think there is no way out, and your financial burdens still persists? Contact us (