Create Table of Contents (TOC) or Sitemap Page for Blogger

Do you want to make a sitemap or Table of Contents page for your blog in blogger engine?

Now I try to show you how to create a sitemap with Google Feed control. This widget only index of your blog posts by only show title of blog.

If you have so many posts in your blog and if you used TOC it will be very long and make you difficult to read your posts. So this widget was designed to make it easy to read.

Preview

How to make a sitemap page for Blogger?

1. Log into your Blogger account and go to Dashboard > Posting > Edit Pages > NEW PAGE.
   
2. On Edit Pages click Edit HTML.
   
3. Copy and paste this code into HTML page:
   

   <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://chocodot.googlecode.com/files/daftarisiv2-pack.js"></script>
   <script src="http://www.sourcecode4.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://chocodot.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

   
   Note: Replace "www.sourcecode4.blogspot.com" on the code above by your blog name.
4. Click Publish Page. Click View Blog to preview your table of contents or  sitemap page.