How To Insert Attractive "Table of Contents Page" Sitemap in Blogger

Socialize It →

Tweet

45

Advertisements

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

Preview Table Of Contents Now

Features:

• The sitemap (Table of Contents) updates automatically when you publish a post

• It will automatically tag your latest posts as NEW in sitemap (Table of Contents)

• All of you posts will be well arranged under there given categories (Labels) 

• Has a fresh and new look with drop down feature

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

/*--------MyBloggerLab 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 "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.mybloggerlab.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.mybloggerlab.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.

I Hope you would like this Table Of Contents (TOC) Widget,This widget is totally unique the reason currently we are the only one who has the working version of the Abufarhan Table of contents widget with MyBloggerTricks CSS styling so if you feel any difficulties feel free to ask till then peace, blessings and happy TOC creating

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).