Step 1

1. Login into your Blogger account with your ID


2. Click on Layout


3. Click on Edit HTML tab


4. Tick on Expand Widget


5. Now search for this line of code.
   

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



6. 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 #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
   <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>
   <!-- Hack by www.hackblogger.co.cc -->



7. Save your template now and your done for the Step 1.

Now you have made the changes onto your template, 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

1. Go to Layout


2. Edit your page element of your Navigation bar code


3. And Add the below line of code
   

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

   
   


4. Click on Save changes and your done

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

1. Go to Layout


2. Click on Edit HTML


3. Click on Expand Widget


4. Find for the codes where your navigation code is implemented


5. And add
   

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



6. Save Template and your done.

There may be some of you who dont want to use this hack on to your navigation menu or will not have a navigation menu, in this case you can use this by adding a page element.

Inserting Table of Contents into Widgets

1. Go to Layout


2. Add a Page Element of your choice in Widget Space


3. Click on Add HTML/Javascript


4. Now add the below code
   

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



5. Save your Page Element and your done.

If you have done these step by step hack in accordance for what we have explained it should work fine.

Changing the Style of Table of Contents.

After implementation of this hack, it would sometimes not please your eyes as the style does not match with the template. So basically there are 3 elements you need to know if you want to change the Style of this hack.

1. Background Colour


2. Text Colour


3. Table of Content list Size

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 #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#333333;color:white">
<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>
<!-- Hack by www.hackblogger.co.cc -->

Blue --> Background Color
Green --> Text Color

And, now if you want to adjust your List Size of your Table of Contents on your Blog, Simply just change the amount of display list here

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

Just Change the 200 list to your desired amount, and also very importantly dont forget to substitute your URL with "YourBlogURL".

Thats all about it, and good luck on implementing this hack on you blog :).