Table Of Contents Widget For Website/Blog Latest 2012

Table Of Contents Widget For Blogger,as every blogger wants to create a table of content page or archive page like in wordpress blogs.And since from time many widgets have been provided by many great bloggers and working great.So i will review all the table of contents widget available till now.The widgets are provide by many great bloggers like amanda from bloggerbuster, abu-farhan from abu-farhan.com, Hans from beautifulbeta , vin from blogdoctor.me and last one is adding the posts manually side by side in post.All these widget are great and any one of will suit your blog needs for sure.




First Table Of Content Widget

So First table of content widget was given by hans from moneystarts.blogspot.com.He gave us this widget 2 years ago and he made look this widget look like table.I too was using this widget but with time i switched to new table of contents.If you want to get this widget you can get it from here at lifeizohkk.blogspot.com.

But as there seems some problems in implementing that,so i am also holding an tutorial for it in the way i used it.

Just download this script first.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<div id="toc"></div><span style="font-size:80;"></span><script src="http://Your-Script_url/tableofcontents.js"></script><br /><script src="http://Your-Blog_url/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><script type="text/javascript">showToc();</script>

Just replace the above codes in red with the script url and your blog url.And Publish Your Post.

Now to make it look great and look like an table just add this css in your blogger html.Just go to blogger layout >> edit/Html and place the below css before the ]]></b:skin> tag.

#toc {
border: 2px solid #C3D9FF;
background: #ffffff;
padding: 5px;
width:500px;
margin:10px 0 20px 0;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #3D81EE;
color: #5d5d54;
padding: 5px 5px 5px 5px;
width: 300px;
}
.toc-header-col1 {
width:300px;
}
.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:90%;
color: #404040;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:90%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
}