Stylish Slide Style Table Of Content / Site Map For Your Blogger

Stylish Slide Style Table Of Content / Site Map For Your Blogger

Add Awesome Slider look Table Of Content / Site Map To Your Blogger

This is also great widget for you blog.Because Every table of content what categorize, showing
here with links.So, your visitors can check every post according to categories.Try to add it to your
blog. Its awesome .
Hope you will like this.

Step To Add Slider Style Table Of Content Into Your Blog

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> 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'); 
}

7. Now click Pages on left side like below.

8. Now click blank image like below.

9. Paste below code in HTML area

<script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js">

</script> 
<script src="http://www.s2free.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://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript">
</script>

Replace s2free.blogspot with your site name.

10. Now click publish.

You can add this link to menu bar.
You are done...