Create Table of contents: A blogger hack.

Back again with a blogger hack and this time with a coolest thing. You can see 'Show Table of contents' section in my blog now where all my table of contents will be loaded with one click. You can try it just to see what table of content looks like if you haven't seen it earlier. Well before starting to write about this blogger hack, i want to remember Hans of beautifulbeta who created this blogger hack as far as i know. Well, i am deriving his codes and hacks but i am trying to write in a much simpler way then him. So here is the process to create a Table of contents in your blog.

Table of contents helps your readers to find your posts easily. Just add some codes and all your posts are one click away from your readers.
Goto blogger 'Edit HTMl' page and search for the code <b:section> with id=main. This is the section which held blog posts. Now replace that line with the following code.

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

Now add the following CSS code to the head section of your template. This code is for the style of your table of contents. You can change this code according to your choice. The best place to add this code is just above ]]></b:skin> I am saying this place now because i was really confused about at which place of the head section should i put this code when i was creating my own Table of contents.


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

Now you are done with 'edit HTML' page. Now save the template and go to 'page elements' section.
Now click on 'add a page element' and then click on 'HTML/Javascript'. Now paste the code there leaving title blank.

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

Now do the final step. Again add a new page element and click on HTML/javascript. Now paste the code there and keep the title 'Table of contents'.

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

Change YOURBLOG with your own name and congratulate yourself for making your own table of contents.
This was todays blogger hack on creating table of contents. You can also try other blogger hacks like Adding Yahoo! emotion on your blog post or making your images tweak on blogger.