Blogger 4 Ever

Here Is The Step by Step Tutorial

1. Make a new Blank Post in Blogger with Title "Table Of Contents" (or whatever you like)
3. Now we have created a new Post Page where the Table Of Contents will be displayed.
4. Note down the URL of this post that we created.
5. Find

</head>

in your template and replace it with the following code after applying the proper URL,

<b:if cond='data:blog.url == &quot; http://www.blogger4ever.com/2009/01/table-of-contents.html&quot;'>
<style>

#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:100%;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ddd;
color: #000000;
padding-left: 5px;
width:57%px;
}
.toc-header-col2 {
width:15%;
}
.toc-header-col3 {
width:28%px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:97%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:97%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 6px;
font-size:97%;
}
.post{display:none;}
.comments-block{display:none;}
.comment-form{display:none;}
.comment-footer{display:none;}
.blog-pager{display:none;}
.date-header{display:none;}
.feed-links{display:none;}
.comments{display:none;}
</style>
</b:if>
</head>

6. Now again edit your template.. Don't Expand the Widget Templates..
7. Find this line of code,

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

and immediately after that place this code snippet..(after editing the snippet with your toc url)

<b:widget id='HTML240' locked='false' title='Table Of Contents' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://www.blogger4ever.com/2009/01/table-of-contents.html&quot;'>
<h2 class='title'>Blog Table Of Contents</h2>
<div class='widget-content'>
<div id='toc'><img src='http://2.bp.blogspot.com/-xK8MVcq5wLM/ThGxrcML8PI/AAAAAAAAAag/LSirljevT2E/s1600/easter.png'/>
Loading The Blog TOC...</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

8. Now Find

</body>

and place this code immediately above it after tweaking it with your blog urls..(there are 4 urls.. replace all those red urls properly)

<b:if cond='data:blog.url == &quot;http://www.blogger4ever.com/2009/01/table-of-contents.html&quot;'>
&lt;script style=&quot;text/javascript&quot; src=&quot;http://blogger-plugins.googlecode.com/files/blogtoc.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&amp;start-index=501&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://www.blogger4ever.com/feeds/posts/default?alt=json-in-script&amp;start-index=1001&amp;max-results=500&amp;callback=loadtoc&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;showToc();&lt;/script&gt;
</b:if>

How To Add Table Of Contents To Blogger
Now try visiting your TOC page..Got it working? If you failed...Don't worry..I can help you out.