Friday, 20 August 2010

Table of Content Widget For Blogger

Table of Content
You can now add Table Of Content to your blog simply by clicking Add widget button.

The user can easily navigate through your posts and this will help if you need to display your posts sorted. Table of contents helps you and others to find your posts easily and Faster. The main features of this TOC is that it helps to list the content sorted in ascending/descending order, either on title or published date. This TOC is completely customizable, you can change the look and feel so easily.

1. Customise Look and feel

2. Decide sorting order

3. Display all your content (No limit on the number of items)

4. Turn on/off total count display

5. Trim the title to fit the column

Changing Sort Order the table of content

Sorting of the posts in the TOC can be changed, 1 Title Ascending, 2 Title Descending, 3 Latest Post First, 4 Old Post First. Default is Title Ascending so that user can search for a post quickly. I use this to list song on my blog so its good to be sorted in Ascending order. To Change this search for SortBy in the Widget Code added to your blog and change the value assigned to it.

Hiding the display count on top
You can Decide whether the post count should be displayed on top right of the TOC. To disable it change displayCount = false; and to enable it change displayCount = true;

Increasing the number of posts shown in TOC
Currently the widget will display only 500 post title. But if you have more posts and want to display all of them then set postCount=1000; assuming the total count is less than 1000. If you have more posts then change this according to your need.

Changing Height And Width
The width and height of the widget can be changed by modifying height and width values in the widget code. Example height="400px"; sets the height to 400 pixels, if you set height=""; it will auto grow to fit the contents in the TOC. The same applied to width as well.

Change the length of each row in the TOC
To make the TOC fit into the width you like and doesn't wrap to multiple lines use numChars = 50; This means it will display the first 50 chaacter of each title in the list. If this is set to 0 it will not trim the title and long titles will get wrapped into multiple lines.

Changing Look and Feel.
If you have a basic knowledge of CSS you will be able to control the look and feel of the TOC completely so that it can match perfectly with your site. We have just 6 styles to control the entire look of the TOC. The CSS used are

td.DC - This specified the CSS style for the Display count on the top of the TOC.

td.OR - CSS style for the odd numbered rows in the list.

td.ER - CSS style for the even numbered rows in the list.

a.LK:link - The links in the TOC which is actually the title is controlled by this.

a.LK:hover - Defines the style when mouse is over the link.

div.TC - Is used to set the border for the entire widget area, you will be able to apply any style which a <div> can have.

1 comment: