How to Add Table Of Contents in Blogger [Easy Method]

How to Add Table Of Contents in Blogger [Easy Method]

How to Add Table of Contents in Blogger without Editing Theme HTML

When you write long articles in Blogger, it will be very difficult for the viewers to navigate through it. Also, when the viewer only wants to see a specific part of the post, he/she may need to navigate through the entire post to find it. There is a chance that the viewers may not recommend such websites to others. The best solution for this is to add a 'Table of Contents' tab to your posts. So a user can easily navigate to the portion they are searching for.

In WordPress, adding a Table of Contents (TOC) section is very simple with the help of plugins. But in Blogger, you have to try manual methods as it comes without a built-in TOC option.

Table of Contents

What is Table of Contents (TOC)?

Table of Contents is a structured headings tab which you can display at the beginning of your blog/website posts to help users to easily navigate to different sub-sections of the web-page. It improves the user experience of the blog/website.

In this post, you can learn how to add a Table of Contents section to Blogger posts without editing the blog theme HTML. Also, the Table of Contents given above for this post is enabled with this trick. You can click on the links to know how it works.

How to Add Table Of Contents in Blogger without Editing Blog Theme

Step 1: Open the blog post that you want to add Table of Contents.

Step 2: Choose the Headings that you want to add to the list. Mark those Headings in H1, H2, H3 or H4 formats.
Blogger Headings tab

Step 3: Switch the blog post into HTML view.

Step 4: Now search for those Heading tags from <h1> to <h4> as you marked them (Check the screenshot given below to find them easily).

Blogger Headings in HTML view

Step 5: You have to add a unique identity to each heading. Let us use an 'id' attribute for this purpose. For example, check the image shown below.

You can add a number or an alphabet as a unique id.

Step 6: After adding a unique id to every headings, now create a TOC section at the beginning of the post.
How to Create Table of Contents in Blogger without Editing Theme HTML
You can use the 'numbered list' feature to order the topics number-wise. Also, you can customize the color and font of TOC as you wish.

Step 7: Now, select the headings separately to assign it a link. Select the first heading in the TOC using mouse and click on the Link/URL option from the Menu to attach a link.

Step 8: Now paste the Permalink of the same blog post in the box and then add a ' # ' symbol at the end of the link. After this, add the corresponding heading id to it. Then press OK. (for example, is the link assigned for this section)

Step 9: Repeat the process for every heading that you want to add to the TOC. Now save the post and open post preview to correct the errors.


This is one of the easiest way to add TOC to Blogger. There are other methods, but in such methods you should edit the blog theme HTML which might be a difficult task if you are a beginner or have no basic idea in programming.

You can also add CSS codes to your blog to customize or apply style to the Table of Contents. If you have any doubts, reach us via comment form.

Also read:

0 Response to "How to Add Table Of Contents in Blogger [Easy Method]"

Post a Comment