Tabbed Table of Contents for Blogger

Posted On // 31 comments
Table of Contents
Table of Contents is what every blogger likes to add to his blog. It helps in decreasing the bounce rate of the blog and increasing the pageviews.

Today I am going to show you how you can add an amazing Table of Contents widget to a page of your blog. This widget is made by Taufik Nurrohman of DTE. The concept of this widget is very simple. It is coded with the help of JavaScript and CSS. It also has many options and setting which I will describe below.

A live working demo of this widget can be seen by clicking the below button.



Live Demo


After seeing the demo if you wish to add this widget in your blog then follow the below steps.

Step 1 : Creating a New Page


First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab.

Step 2 : Adding the code


Once you are in the HTML tab of Page Editor add the below code in it.

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" 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="http://www.allbloggertricks.com/" title="Tabbed TOC">All Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://your-url.blogspot.com", // 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: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    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>
<script type="text/javascript" src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Copy and paste the above given code in the post editor.

Step 3 : Table of Content Settings


 Now change the URL in the blogUrl field. You may change other settings. It is briefly described in the code what they are and how to change them. After making the changes save the page.

You are done now. Now you can link the page wherever you want. You and your visitors may now see this amazing table of content in your blogger blog.

31 comments

Rohit Asare Author
28 July 2013 at 15:10

Awesome Trick man,I added it to my f*cking blog TechEthix

Reply
31 July 2013 at 08:43

Owsume.......thanks for Sharing
keep sharing such wonderful tools
OEWAYS

Reply
leviomat Author
1 August 2013 at 02:06

Muchas gracias. Eres un genio!!

Reply
3 August 2013 at 20:39

Nice dude

Reply
7 August 2013 at 07:00

Taufik Nurrohman, he is my friend, we from indonesia

Reply
11 August 2013 at 07:37

Hey! Wonderful contents widget, works a treat. Just wondering if there's any way to make the list of Labels wider, since I have a few long-ish labels?

Reply
11 August 2013 at 10:21

Hi Lewis to make the label side wider add the below given code just at the end of the code given in this post.

[pre]
<style>
#tabbed-toc .toc-content, #tabbed-toc .divider-layer{
width: 60% !important;
}
#tabbed-toc .toc-tabs {
width: 40% !important;
}
</style>
[/pre]

Reply
Adu Alex Author
12 August 2013 at 19:25

was very useful ! ,.
installed it in 8ruuux download

Reply
Anonymous Author
18 August 2013 at 09:08

Thanks Man a great Widget!
I have installed it in www.miniWorldFree4u.blogspot.com

Reply
Temptations2 Author
18 August 2013 at 21:56

Wonderful tutorial, it works great. (๑‵●‿●‵๑)

Reply
2 September 2013 at 00:42

www.gamecover.com.br uses to! thanks!

Reply
My SOUND mag Author
13 September 2013 at 16:18

Hello I want to use in www.mysound-mag.com , but i have too many labels... like... 500. and i want filter only the most important. Can you help me how can i do this? Thank u

Reply
25 October 2013 at 15:14

Can you just make a code for only selected labels..?

Reply
Eric Author
23 November 2013 at 01:34

I'm getting an error that says, "The server http://reader-download.googlecode.com:80 requires a username and password. The server says: Google Code Subversion Repository"

Reply
Kay Icarus Author
7 March 2014 at 23:25

Hi friend..
your css and java script on you page that need log ini with account user and password... how to tabbed table of content can work in my blog...

kayicarus [at] yahoo.com

Reply
27 March 2014 at 10:12

Hi, I am the script author. For a valid reason my account in reader-download has been banned by Google. Now the script has been moved to this subdomain: dte-project.googlecode.com/svn/trunk

Read more: hxxp://www.dte.web.id/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html

Reply

thanks for Sharing keep sharing such wonderful tools :)

Reply
2 June 2014 at 22:16

hi, i tried but it say i need to log in....
please answer.

thank you

Reply
Nikita Willy Author
13 September 2014 at 01:21

This code is not working in my blogspot blog.

Reply
15 September 2014 at 10:08

Fixed, you can check it now. Thanks for informing.

Reply
Sergiy Yagoda Author
13 December 2014 at 02:04

Awesome!

Reply
Martin Vlach Author
14 January 2015 at 05:51

Looks it does not work on my blog http://wlashack.blogspot.cz/p/loading.html
It always stops on "Loading..." and no article is displayed.
Can someone help, please? Thanks.

Reply
2 March 2015 at 18:00

Niiceee

Reply
2 May 2015 at 15:22

Nice Post
Keep It Up:)
Regards SEO Tips 2015

Reply
Clive Elliott Author
30 August 2015 at 13:29

Tried to add this and all it delivered on two different blogs was a green line with Loading... in it and nothing else unfortunately.
Blog I most wanted to use it on was www.tottenhamhotspur.blogspot.com

Reply
Admi Ambrose Author
8 October 2015 at 17:50

Thanks for the posting

Reply
Mahesh S Author
12 December 2015 at 17:42

Very useful and looking good.
Thank you. Sooooo much.

Reply
Goutam Paul Author
19 January 2016 at 11:27

Good Post.... But i need a script of one label contents so i can create pages named
a label.

Reply
babak Author
3 October 2016 at 21:30

not working anymore

Reply
Vishal Chopra Author
21 January 2017 at 17:02

Thank you for this tutorial.

Reply
abul kalam Author
9 March 2017 at 20:06

Hi,thank for your important tutorial about blogspot.
For more,please visit my blog.
https://blogsnucleus.blogspot.com/

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Tabbed Table of Contents for Blogger |