How to create table of contents page for blogger

Hi friendzz today i m going to show you how to add table of contents page or sitemap for blogger. Many blogger want to make sitemap or Table of contents for their blog. Some of them only index of their posts by only show title of blog or make it manual by type the title every posts.This widget automatically generates a sitemap or table of contents of your blog. With such table of contents it is easier for your visitors to look at complete structure of your blog. This widget displays your blog posts according to their categories and "New!!" text is shown for the latest posts.You can see a demo of this widget in my Table of Contents page.

Follow the steps below to create a Table Of Contents page for your blog.

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Search for ]]></b:skin>
4. And just above it paste the CSS code below,

/*--------TRICKS DONOR TOC-----*/ 
.judul-label{ 
background-color:#E5ECF9; 
font-weight:bold; 
line-height:1.4em; 
margin-bottom:5px; 
overflow:hidden; 
white-space:nowrap; 
vertical-align: baseline; 
margin: 0 2px; 
outline: none; 
cursor: pointer; 
text-decoration: none; 
font: 14px/100% Arial, Helvetica, sans-serif; 
padding: .5em 2em .55em; 
text-shadow: 0 1px 1px rgba(0,0,0,.3); 
-webkit-border-radius: .5em; 
-moz-border-radius: .5em; 
border-radius: .5em; 
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
-moz-box-shadow: 1px 1px 4px #AAAAAA; 
box-shadow: 0 1px 2px rgba(0,0,0,.2); 
color: #e9e9e9; 
border: 2px solid white !important; 
background: #6e6e6e; 
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); 
background: -moz-linear-gradient(top,  #888,  #575757); 
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); 
} 
.data-list{ 
line-height:1.5em; 
margin-left:5px; 
margin-right:5px; 
padding-left:15px; 
padding-right:5px; 
white-space:nowrap; 
text-align:left; 
font-family:"Arial",sans-serif; 
font-size:12px; 
} 
.list-ganjil{ 
background-color:#F6F6F6; 
} 
.headactive{ 
    color: #fef4e9; 
    border: 2px solid white !important; 
    background: #1C8DFF; 
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2)); 
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2); 
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); 
}

   5.   Save your template and now create a New Page (not a new Post).
     6.    Give Your new Page a relevant title like “Table Of Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,

<div dir="ltr" style="text-align: left;" trbidi="on">

<script src="http://dl.dropbox.com/u/124897262/Saeed%20Aquib%20Ahmed%20Sitmap.js

"></script> 

<script src="http://tricksdonor.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> 

<script type="text/javascript"> 

var accToc=true; 

</script> 

<script src="http://dl.dropbox.com/u/124897262/tricksdonor%20sitmap.js" type="text/javascript"></script></div> 

Change "http://tricksdonor.blogspot.com" to your blog URL.
And if you liked this post, please like us on fbpage. Thanks!