Attractive " Table Of Contents " Page

It's very important for a publisher To insert Sitemap (Table of Contents) in his blog  to make it look more professional. Basically Sitemap (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.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS). 

This widget is designed and optimized with CSS so it looks really attractive and has some Jquery which do attract your eyes.So let us start our fingers rolling over the tutorial.

But first I know you would love to see the preview of the widget,so first see the widget which we are going to apply on our blog

Live Demo >>

( Its My other Blog ) 

Adding a Table Of Content in Blogger:

• 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

/*--------Blogger TricksZz-----*/ .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 "XYZ Table Of Contents" and now under EDIT HTML tab (button) paste the following code
  
  
  

  <script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"></script> <script src="http://www.bloggertrickszz.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>

  Now after pasting the code above look for  http://www.bloggertrickszz.blogspot.com and replace it with your blog URL and Publish the page now go and view your Amazing Table of Contents with Drop down style. 

Follow @shipsocker

Stay Connected With Free Updates

Subscribe via Email