How to creat table of contents sitmpe for blogger

Create Table Of Contents or Sitemap Page For Blogger 

Table of Contents (Sitemap) is a page on your blog where all posts are arranged in accordance to their type, and shows the links to all posts published on your blog so far. Table of Contents (Sitemap) is important for all bloggers to have on their blog. This make blog look professional, and it helps your blog visitors and readers to navigate through your blog posts.

During search on Google i have find out a good script for sitemap table of contents designed by Naira, now i am sharing this nice search with you. Here is a script that saves time and helps to update all new posts made on your blog to your Table of Contents (sitemap) page automatically. This script will display all posts made on your blog under their specified categories (Labels). This widget also comes with a CSS & Jquery to make it attractive.

Steps To Add Automatic Sitemap (Table of Contents) Generator

Note: before you make any changes on your templates, always make a back up of it.
1. Go to Blogger Dashboard > Template
2. Click on Edit HTML
3. Press (CTRL+F) to search
4. Find ]]></b:skin> code in your template
5. finally copy the below CSS code and paste it before ]]></b:skin> tag.

/*--------JustNaira 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');
}

6.  Save your Template after inserting the CSS
7.  Go to your dashboard and creat new page and paste the below code in html view mode. Save page. Thats's you done.

<script src="http://olusegun-fapohunda-calculator.googlecode.com/svn/Justnaira-tos-file.js"></script>
<script src="http://www.it-taaleem.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://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js"  type="text/javascript"></script>


Make sure you change http://www.it-taaleem.blogspot.com to your own blog URL and then publish the page. Visit the page link to view your awesome blog sitemap (Table of Contents).

Table of Contents (Sitemap) Customization:

The color of the category when in active mode is blue while when it is inactive it appears as dark gray.

So to change the active mode, simply change #9dc2e7 and #438cd2. Here is a color generator tool that will aid you to select the best color code that you love.If you encounter any difficulties in the process of setting up your blog Sitemap, don’t hesitate to use the comment box below.