Stylish Tabulation Effect for Full Sitemap in Blogger

This widget will help to create table of content for your blog. This will reduce bounce rate for your blog.

There will be two column, left one is label name and the right one is the title of the content belong to the label.

View the live demo here.

How to add stylish sitemap generator to your Blog?

Step 1: Go to blogger.com and login with your username and password.

Step 2: From the blogger dashboard go to Pages and click New page and then select Blank page.

Step 3: Now click HTML tab and paste the below code inside it.

 <link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />  
 <div id="tabbed-toc"><span class="loading">Loading...</span></div>  
 <script type="text/javascript">  
 var tabbedTOC = {  
   blogUrl: "http://your-url.blogspot.com", // Blog URL  
   containerId: "tabbed-toc", // Container ID  
   activeTab: 1, // The default active tab index (default: the first tab)  
   showDates: false, // `true` to show the post date  
   showSummaries: false, // `true` to show the posts summaries  
   numChars: 200, // Number of summary chars  
   showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)  
   thumbSize: 40, // Thumbnail size  
   noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL  
   monthNames: [ // Array of month names  
     "January",  
     "February",  
     "March",  
     "April",  
     "May",  
     "June",  
     "July",  
     "August",  
     "September",  
     "October",  
     "November",  
     "December"  
   ],  
   newTabLink: true, // Open link in new window?  
   maxResults: 99999, // Maximum post results  
   preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")  
   sortAlphabetically: true, // `false` to sort posts by published date  
   showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked  
   newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text  
 };  
 </script>  
 <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>  

- Replace http://your-url.blogspot.com with your blog URL.
- You can easily customize entire widget by changing each value ( Check the comment to know about each line ) .

Step 4: At last give the post title and click Publish button.