Well in this tutorial iam Going to Show you How to Create this Table of Contents Widget for Blogger.Well this widget helps the Visitors of a blog to Easily Find out the Posts of your blog Which are Sorted Under Alphabetical order in this Widget.Well the New Posts Which You've made will be give a Tag of "New". So Add this Widget to a Stand-alone page of Your Blog And let your visitors easily find all the posts.lets've Have a Demo of this Widget before going to the Tutorial:.

Live Demo

<style type="text/css">
 .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: #f78d1d;
  background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
 }
</style>
<script src="http://letsenjoy.googlecode.com/files/toc1.js">
</script>
<script src="http://goodinblogging.blogspot.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://letsenjoy.googlecode.com/files/TOC2.js" type="text/javascript">
</script>