How To Add Table Of Contents Widget To Blogger Blogspot

How To Add Table Of Contents Widget To Blogger Blogspot - Many Blog owners want their blogger blog to be user friendly and want to show all blog posts they have made, but unfortunately we don't have that option in blogger blogspot except for the Archives and labels, So in this tutorial I willl show you how to add (TOC) Table of Contents widget in Blogger Blogspot which will allow our users to navigate to all other Blog posts.

After implementing this small trick in your template. It should appear as how I have added (TOC) Table of Content Widget in my blogger blogspot blog. To implement this TOC in your blogger blogs, There are 2 simple steps you need to follow.

Step 1. How To Add (TOC) Table Of Contens Widget In Blogger

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 and your done in step 1. Now you need to insert this hack on to your blogger by adding it into your navigation bar or as a blogspot 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 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 Widget In Blogger

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 In Blogger?

You might also like: How To Create A Table Of Contents Page In Blogger?
How To Add Html Text Box and Textrea in Blogger Post
How To Add FeedBurner Recent Posts Widget On Blogger