How to create Table of contents for blogger

Sitemap or table of contents is very important as it is more useful visitors to navigate the thousands of post.Here we had widget created by abu-farhan which helps me to showcase all my post in a single page with just adding the javascript code to the blogger page.You can see the live demo in table of contents for blogger

Adding table of contents sitemap css

• Log in to blogger.
• Edit template and search for ]]></b:skin>
• Then add the below css code above the tag.

.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');
}

• Then save the template.

Adding Table of contents to Blogger page

• Now close that template as that's all.
• Now open the pages in blogger.
• Create a new page.
• Then click the html mode.
• Then clear all the code which already present.
• Now add the below code.

<script src="https://blog4al.googlecode.com/files/toc-sitemap-blogger.js"></script>
<script src="http://www.blog4al.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="https://blog4al.googlecode.com/files/sitemap-toc-blog4al.js" type="text/javascript"></script>

• Now change the blog4al.com with your blog or website URL.
• Then name it and save the page and publish.
• Visit the page and you will see the links of all post with new post labeled new.