How to Add a Table of Contents to Blogger

Many blog owners want thier blog to be user friendly and want to show all the posts they have made, but unfortunately we dont have that option in blogger except for the Archives and Labels. So in this tutorial we shall learn how we can add a Table of Contents which will allow our users to navigate to all other posts of our blog.


After implementing this small trick in your template it should appear as how i have added in my blog. To implement this to your blog, there are 2 steps you need to follow.

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 bloggers-university.blospot.com -->

  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 bloggers-university.blospot.com -->



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 :).



Hope you like this post of ours, to read more post of similar and many more on blogging, enter your email and subscribe with us to recieve updates of this blog via email or subscribe to as a reader.
Subscribe in a reader


Bookmark this post:
StumpleUpon Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google



Do you think this post is worth reading and would you like to help our work, if so please bookmark this post for us and lets share it with others.

Link to this post:

People who read this post, also read:



Comments :

1
Salih Kulangara said...
on 

hi brother,
I have been using many of your tricks on my blog, thanx, Now i want to add this feature Table of conetent, but I couldnt find out the tag "b:include data='post' name='post'/" in my template. Plz help me to add table of content in my page

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

What do you think of this post ?

Newer Post Links Older Post Links Go To Home