Stylish Customizable Table of Contents for Blogger

To get SEO optimized site, submitting sitemap is compulsory. To get User Frienly site, creating a stylish and good looking table of contents is one of the Answer. No question about it, if you have your sitemap submitted to google for instance, google has a better idea to learn your site structure. And if you list your posts in a table of contents page, your visitors will be able to see all posts and choose what interest them. To submit sitemap please read how to generate sitemap for better page indexing, and to create table of contents please continue reading this post.

There's only one step needed to create table of contents (TOC) for your blog. Just create a page, better be a static page. Then add the following code in HTML editor:

<style type="text/css">
/*Outer Border
------------------*/
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}

/*Label Color and Background
------------------*/
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}

/*Latest Post Info
------------------*/
.new{color:#FF5F00;font-weight:bold;font-style:italic}

/*Post Title List
------------------*/
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc"><script type="text/javascript" src="http://dvslabs.googlecode.com/files/customizable-TOC.js"></script>
<script src="http://yourblogname.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Replace "yourblogname" with your real blog URL, save the post and done. For live example of how this table of contents looks like, click the sitemap links in the main navigation menu or click here.
Additionally, you may change the look of your TOC by editing the included style above. There you may change the Border, Label Color and Background, Latest Post Info, and Post Title list style. Just edit and customize the style whatever you like so it should match your site template. Note, the special linear gradient CSS applied. For some browser like old Opera, this linear gradient will not work. But it should work fine in latest modern browser like Google Chrome, Mozilla Firefox or Safari.

Credit to TOC script author by: Abu Farhan