How to Create Table of Content or Sitemap in Blogger ~ Cool Blogger Tricks

Table of Content is a page where all the content of book or website located but the main heading are viewed in that page. If we want to to see any of the topic from table of content then we visit the page number or web address where that topic is located. In website, Actually table of content is a sitemap of the website. You can create a beautiful Table of Content in your blogger blog. It'll help you to increase search ranking.

How to add Table of Content on blogger

Go to blogger dashboard

Dashboard >> Template

Backup your Template

Edit your Template

Search in your blogger template for ]]></b:skin>

Add this CSS code just above the ]]></b:skin>

 /*-------CoolBloggerTricks.com 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');  
 }

Save your Template.
Now go to pages > New page > Blank Page
Click on HTML
Paste the piece of code in your blogger page.

 <script src="https://dl.dropboxusercontent.com/s/6r0aysnjjj0umcj/toc.js"></script><script src="http://www.coolbloggertricks.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://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js" type="text/javascript"></script>

Replace www.coolbloggertricks.com with your own website address.
You are Done :)
Final Words
So this is table of content for blogger and I hope that you'll like it.

Get Free Updates in your Inbox