Blogger 4 Ever

Step 1. Add Table Of Contens

Login into your Blogger account
Click on Design > Edit Html
Check Expand widget Templates

Now search for this line of code.

<b:include data='post' name='post'/>

Now, replace the above code with the following piece of code

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #26b;border-bottom:1px solid #26b;margin-bottom:2px;background:#ffffff;color:26b">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Save your template now and your done for the step 1. Now you need to insert this hack on to your blog by adding it into your navigation bar or as a widget.

Step 2. Inserting Table of Contents into your Navigation Bar

Go to Design > Edit Page Element of your Navigation bar code, Add the below line of code

<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>

Click on save changes and your done.

Or some of you may have the navigation bar on your template, in that case

Go to Design > Edit Html
Click On Expand Widget
Find for the codes where your navigation code is Implemented and Add

<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>

Save Template and your done.

Inserting Table of Contents into Widgets

Go to Design > Add a Page Element of your choice in widget Space
Click on Add HTML/Javascript
Now add the below code

<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>

Save your Page element....

Changing Background and Text Color in TOC

You can change the Background Color and the Text color of your choice by changing this part of code.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #26b;border-bottom:1px solid #26b;margin-bottom:2px;background:#ffffff;color:#26b">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Green >> Background Color
Blue >> Text Color

And, Now if you want to adjust your list Size of your Table of Contents on your Blog, Simple just change the amount of display list here. Just Change the 200 list to your desired amount, and also very importantly don't forget to substitute your URL with "YourBlogURL".

<a href="http://YourBlogURL/search?max-results=200">Table of Contents</a>

Update:- How To Create A Table Of Contents Page For Your Blog..??