Create Table of Contents in Blogger

"Create table of contents in blogger" searching in Google is Easy but good result wont come until anyone complete the hack to create table of contents.Now this hack is completed by beautifulbeta.Beautifulbeta is a blog that provides you different blogger hacks,blogging tips,SEO tips and many other thi9ngs to help promote your blog.Now lets come to the point.

Table of contents helps you and others to find your blog posts easy and Faster. Besides this there are different others advantages of Creating Table of Contents . After you complete this hack on your blog you and others can view and hide table of contents in just a mouse click.You can sort post by date and title.Now let's start creating this hack.


Goto blogger Edithtml Page and look for <b:section> with id=main.This section hold blog posts . Change that line of code as follows.

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

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

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

Save your Template and goto your blog Page Elements Tab . Now add a new Html and Paste the following code leaving the Title Blank.
<div id="toc"></div>

Now do the Final step . Again add a new Html and paste the Following Code.Set the title as "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 Blog name and Enjoy Table of Contents.