How to Create a Table Of Contents Page For Blogger?

It's very important for a publisher To insert Table of Contents in his blog  to make it look more professional. Basically Table of contents is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.

We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you  publish a new post on your blog it will automatically added  to your Table of Contents Page so it really saves lot of time.

>> PREVIEW <<

This Table of Contents widget Feature :

• Will display all of your post well arranged under their specific categories (Labels)
• Updates automatically when you publish a post
• Automatically tag your latest posts as NEW in Table of Contents.
• Designed and optimized with CSS so it looks really attractive
• Has some Jquery which do attract your eyes.

So let us start our fingers rolling over the tutorial

To insert an Attractive Table Of Contents (Sitemap) in Blogger Follow these Steps

• Go To Blogger >> Template >> Edit HTML >> Proceed 
• Now search For  ]]></b:skin> in Your Template with (CTRL+F)
• when you find  ]]></b:skin> just above it  place the following code

/*--------Free Blogger Home 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'); }

• Now save the template by pressing Save Template button
• Now we will create a new page for our Table of contents Remember:we will create a new page not post.To create a new page go to Blogger >> Pages >> New Page >> Blank Page 
• Now Give title to your page i.e "Loneon's Table Of Contents" and now under EDIT HTML tab (button) paste the following code

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script> <script src="http://freebloggerhome.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script> <script type="text/javascript"> var accToc=true; </script> <script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script> Now simply replace http://freebloggerhome.blogspot.com with your Blog URL and hit save. View your new page to see a beautiful Table Of Contents with a nice drop down effect.