New Table Of Contents For Blogger

• Home
• Widget
• New Table Of Contents For Blogger

New Table Of Contents For Blogger

Posted by Unknown | 1:13 PM | Leave a Comment

Table Of Contents(TOC) is a very important feature which assembles your all blog posts under categories you earlier specified . It is very helpful in search engine optimisation . It helps visitors to navigate through the posts easily as it saves a lot of time for them.

You can view live demo here.

How To Create ?

We have to follow some simple steps :

• Login to your Blogger account .


• Click on Pages.


• Create a new page and select HTML.


• Paste the code given below.

<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
} 
</style> 
<div id="toc"><script type="text/javascript" src="http://mybloggerworld.net/tools/MyTOC.js"></script> 
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script></div>

•  It's done.

[callout bg="#f3b8b8" color="#a65959" border="#f3b8b8"]You can also change colors by editing css.[/callout]