How To Insert Attractive Tabular Array Of Contents Page Sitemap Inward Blogger

It's rattling of import for a publisher To insert Sitemap (Table of Contents) inwards his weblog  to arrive await more professional. Basically Sitemap (Table of contents) is a house inwards your weblog where all of your transportation service are arranged according to their type.This is the argue why today nosotros volition going to Insert a Table of Contents inwards Blogger.

We convey designed a tabular array of contents for blogger which volition update automatically hence you lot don't remove to only edit it every fourth dimension when you lot release a novel post.If you lot  publish a novel transportation service on your weblog it volition automatically added  to your Table of Contents Page hence it actually saves lot of time.This Table of Contents widget volition display all of your transportation service good arranged nether their specific categories (LABELS). 

This widget is designed in addition to optimized amongst CSS hence it looks actually attractive in addition to has about Jquery which practise attract your eyes.So allow us start our fingers rolling over the tutorial.

But start I know you lot would honey to run into the preview of the widget,so start run into the widget which nosotros are going to utilise on our blog

Preview Table Of Contents Now

Features:

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

• It volition automatically tag your latest posts equally NEW inwards sitemap (Table of Contents)

• All of you lot posts volition endure good arranged nether at that topographic point given categories (Labels) 

• Has a fresh in addition to novel await amongst drib downwardly feature

Adding a Table Of Content inwards Blogger:

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

• Go To Blogger >> Template >> Edit HTML >> Proceed 

• Now search For  ]]></b:skin> inwards Your Template amongst (CTRL+F)

• when you lot find  ]]></b:skin> only inwards a higher house it  place the next 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 enterprise 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 enterprise 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 salvage the template yesteryear pressing Save Template button 

• Now nosotros volition practise a novel page for our Table of contents Remember:we volition practise a novel page non post.To practise a novel page become to Blogger >> Pages >> New Page >> Blank Page 

• Now Give championship to your page i.e "XYZ Table Of Contents" in addition to similar a shot nether EDIT HTML tab (button) glue the next 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 later pasting the code inwards a higher house await for http://www.mybloggerlab.com and supplant it amongst your weblog URL in addition to Publish the page similar a shot become in addition to thought your Amazing Table of Contents amongst Drop downwardly style.

I Hope you lot would similar this Table Of Contents (TOC) Widget,This widget is totally unique the argue currently nosotros are the exclusively i who has the working version of the Abufarhan Table of contents widget amongst MyBloggerTricks CSS styling hence if you lot experience whatsoever difficulties experience complimentary to inquire till hence peace, blessings in addition to happy TOC creating