Djabu

How to Add Table Of Contents to Blogger :

Step 1 - Make a new Page in Blogger with a suitable title
In the page editor, switch to HTML mode, and paste the following code into the Post Editor 

<div id="bp_toc">Loading TOC. Please wait....</div>
<script src="http://blogergadgets.googlecode.com/svn/trunk/blogtoc.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Publish this Post and view the Page.You will be able to see the TOC, but it would be messed up 

Step 2 - So it is time to Style the TOC using some  CSS code Go to Design/Template > Edit HTML and Look for 

]]>b:skin>

and just above that paste the following CSS snippet 

#bp_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%;
}

Live Demo Click Here

Author : Blogger Plugin