Don't Miss

Add a Tabbed Table of Contents to your Blogger Blog

By Zohaib Liaqat - 14 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="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

Tags:

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

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

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

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

    ReplyDelete
  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.

    ReplyDelete
  5. This comment has been removed by the author.

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

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

    ReplyDelete
  7. This comment has been removed by the author.

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

    ReplyDelete
  9. EMERGENCY LOAN OFFER APPLY

    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 : abdullahibrahimlender@gmail.com
    whatspp Number +918929490461
    Mr Abdullah Ibrahim

    ReplyDelete