Blogger Table of Content Widget

Now you can add a cool widget named BlogToC to display your blog Table of Contents. I found this customizable widget at BeautifulBeta blog. You'll need to do some steps in order to install this widget. But you can customize its look and feel through CSS style sheet.

The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full ToC.

Steps to install this cool widget are:

Go to your Blogger dashboard at edit HTML page. Look for the <b:section> with id=main. This is the section that holds the Blog posts. Change that line as follows:

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Then save the template and switch back to Page Elements Tab. Add a HTML page element above your Blog Posts element. Leave the title blank. Add the following html:

<div id="toc"></div>

Then once again save your template.

Add a new page element at you sidebar. Set the title to TOC or you might write it Table of Contents or anything else up to you. And paste this code at contents column:

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Look at the code above. Replace YOURBLOG with your own blog name. Save it again.

Now go to edit HTML page again and add following CSS style. Here it is the part which you can edit to fit your own blog design.

<style type="text/css">#toc { border: 0px solid #000000; background: #ffffff; padding: 5px; width:500px; margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:250px;}.toc-header-col2 { width:75px;}.toc-header-col3 { width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:80%; text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%;}</style>

If you are not so understand about editing HTML, then just place it ato the <b:skin> part of the template, or just insert it in the sidebar widget.