How to Add Table of Contents on Blogger?

Filed Under :

Hi bloggy readers,
Table of contents is a list of chapters usually being written in the beginning part of book that tells readers about the whole concept of book, in chapter by chapter. So, readers will find it easier to get to the specific chapter they want to read without exploring the whole book, page by page. Table of contents is one of many fundamental elements in every book on this planet. So, it's impossible if there is a book without a table of contents in it.

It goes the same with blog. Blog can be described as a one page book which needs a table of contents as well. But there is a slightly difference between the tables of contents from book and blog. In blog, table of contents works automatically every time the author, in this case, blogger, makes a new update or post. Otherwise, the table of contents of book works statically without any necessary update, so every time the author decides to publish his book in the printing company, through the publisher's service, the author him/herself has to make sure that his/her book is the final product that will never be edited in the next years to come. So i think, we, as a blogger, is so lucky to have this kind of handy feature for our blog.

Anyway, want to add this table of contents to your blog? Just follow every step below, and you're good to go.

First Phase: Editing Blog Template

1. Log in to Blogger
Now visit and enter to your account.

2. Go to Edit HTML
In Dashboard, pick your blog and press the button Layout/Design > Page Element > Edit HTML.

Anyway, before editing the template, you might want to save the current template of your blog by pressing the link Download Full Template. Check this page to find out why you need to do that - Backing Up Your Current Template .

save blogs templates

3. Give a tick at the Expand Template widget box.
After landing to Edit HTML, now give a check mark at the small box called Expand Widget Templates.

4. Find the code
Now press Ctrl + F, and find the code below:
<b:include data='post'

5. Replace the Code
Now replace the code on number 4 with this code:
<b:if cond='data:blog.homepageUrl !=
<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:#EAE9E9;color:#406A0E;">
<b:include data='post' name='post'/>
<b:include data='post' name='post'/>

6. Save the Change
By pressing the Save Template button, you can save the current changes you've just made. Now you can proceed to the next phase.

Adding the table of contents on navigation menu

7. Go to Page Element
Now switch back the sub-tab from Edit HTML to Page Element.

8. Edit the Navigation Menu
In order to place the new Table of Contents link in your blog template, you must firstly edit the current configuration of your blog navigation menu, where the Home, About Us and Contact Us button were set. For example, look at the picture below!

tables of contents on blog's menu

Now look at the widget that controls the navigation menu in your blog layout

position of menu in blog layout

and then press the button Edit in that element.
add a widget

By pressing the Edit link below the element of navigation menu, you will be prompted with the current configuration of your blog navigation menu.

add a tables of contents on the current menu

Now create a new button in that navigation menu using this code as the URL address. And then, name that button as Table of Contents. Don't forget to replace the URL address with your own address. Anyway, the value 200 indicates the total posts that will appear on the result page.

9. Save the Change
Now press the Save button on the HTML/Javascript gadget and as you can see in your blog, the new button tables of contents has been successfully added on your blog navigation menu. Now, by clicking the button called tables of contents, will bring you to the new page contains all the posts you've made in your blog from the past to the present.

Okay, guys! That's it. Hope this tutorial to install table of contents works on your blog.

Filed Under :
You might also like to read :
Share This Article to Other People Across the World !
Get the fresh updates from!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
edit post


CHELSEA Studio&Distro said...

its helpfull...
i smile on ur ;)

Daniel Likin P said...

sure Chelsea Studio, You Are Welcome...

ilmuilmu said...

thx fo your kindness

Post a Comment

Copyright © 2013 All Rights Reserved. Reproduction in whole or in part or in any form or medium without written permission is prohibited.
Web Theme Designed by Daniel Likin
Disclaimer | Privacy Policy | Contact Us Google Analytics Alternative