Tabulation contents widget for Blogger

Table of Contents of all posts and pages is what every blogger likes to add to his blog. It’s main benift is to reduce the bonus rate of your blog and increase the page views per visitors. So, why don’t add this widget in Blogger. This widget is developed by Taufik Nurrohman of DTE. This widget is coded with JavaScript, HTML and CSS. You can easily add this widget in Your Blogger blog to make list of all posts and pages at just a single place. Just follow the below clear steps to add this widget. You can see a live demo before implementing it in your blog if you like …this tabbed table of contents. It also has many options and setting which I will describe below.

Original Demo

Steps to add this widget in Blogger

To add widget in Blogger we need to make a new page. So get started...
Login to your Blogger dashboard and create a new Page→ Switch to HTML mode and Paste the below Code in HTML

HTML

<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 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.bloggingbee.com/" title="Tabbed TOC">Bloggingbee</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://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Configuration/Settings

http://your-url.blogspot.com" replace it with your blog url and save page.

Advance Setting (optional).

Option Information

blogUrl: Replace value with your blog address.

containerId: ID element to be used as a container for JSON that has been processed (ignore if not necessary).

activeTab: Used to determine the serial number of the active tab (value of 1 will make the first tab in order to be active, as well as the first tab content will also open the first time the page is accessed).

showDates: Change the value to true to display the time of sunrise posting.

showSummaries: Change the value to true to display a summary post.

showThumbnails: Change the value to true to display a thumbnail post (not recommended because it will make the old page loaded).

thumbSize: Used to determine the size of a thumbnail .

noThumb: Backup image URL for the post that has no pictures in it.

monthNames: Used to specify the names of the months according to the dating system in the country where you live.

newTabLink: If the value true , all links will open in a tab / new window when clicked.

maxresults: The maximum number of posts to be displayed.

preload: Used to determine the time delay loading of JSON. Use milliseconds or simply write "onload" that this widget to load after the entire page has finished loaded.

sortAlphabetically: false to sort normally posts by moonrise, true to sort posts based on the alphabet.

showNew: false to hide the marks New! . Change the numbers to determine how much of the recent posts that want to be labeled New! .

newtext: HTML markup free to create labels New! the latest postings.

Hope This widget will make your Blog easy to navigate for your visitors and for you. Enjoy!