Add a Tabbed Table of Contents to your Blogger Blog

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.

Demo

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="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.blogolect.com/" title="Tabbed TOC">Learn More Cool Tricks - Blogolect</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://YOUR-BLOG-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>

Customization:

• Replace http://YOUR-BLOG-URL.blogspot.com 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 @ https://www.facebook.com/groups/blogolectforum

Share This:

Tags:

Widgets

• Prevoius
• Next