Add Table Of Contents Widget for Blogger

Table of Contents is one of the most Popular Blogger Sitemap Widgets preferred by many bloggers. It helps users to browse your all blog posts / contents easily in a single window.
It is very helpful for your blog as it helps to Increase Your Blog Pageviews !

In last post I had explained about "Adding a responsive blogger sitemap widget to your blog"Today we are going to learn How To Add This Cool and Responsive Table Of Contents to your Blog. Its really easy to install on your blog.

You can also check our Cool and Responsive Widgets

This widget is made by Taufik Nurrohman of DTE , It contains some CSS and Java Codes which makes this widget totally awesome.

You can have a look on Our Live Demo 
Live Demo

After Watching Our Live Demo, Do you want to add this to your blog? Yes ? Then simply follow these steps :
1. You can add this as a page so for that, go to Blogger > Pages > Click HTML Section and copy the following code and paste it in it.

<link rel="stylesheet" href="http://reader-download.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 2px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://techethix.blogspot.com" title="table Of Contents">Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://techethix.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index undefineddefault: 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 undefinedNot 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 undefinedoption => 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://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<a href="http://techethix.blogspot.com">Blogger Tricks</a>

2. Just change http://techethix.blogspot.com to your blog URL.
3. Click Publish ! That's It You are done now !
Important : Please Don't Remove any Link from this widget , it might not work for your blog.
Don't Forget to Share This post with your friends and also Subscribe Us via Email !