How To Add Table Of Content In Blogger – Manual Method

Are you wanting to add the table of content in blogger, but not able to find the right post? If yes, don’t worry. You are at the right place. In this post, I will show you how to add the table of content in blogger, manually.

what is a table of content?

A table of contents, often abbreviated as TOC is exactly what it sounds like: a list of the contents of a book or other lengthy writing project. It is usually found at the beginning of a written work and includes the titles or descriptions of first-level headers, and often includes second level or even third level headers.

A TOC is a list of internal links to content within your blog post. It helps the visitor to jump directly to the part of your post that’s most relevant to them.

A table of contents (TOC) can list the contents of a book, magazine, or other publication; display a list of illustrations, advertisers, or photo credits; or include other information to help readers find information in a document or book file.

Why Add a Table Of Contents?

A table of content is very helpful for your users to find what they are looking for, without having to scroll through the whole page, or having to search for it on the page.

It also helps in SEO, as Google prefers rich content over thin content. Adding an index to your article will make it more useful and informative.

SEO Benefits Of Table Of Content

I have been using Table Of Content for my blog, to help my readers navigate through the articles. It is a very nice way to improve the navigation of your blog.

There are many benefits of using a table of content, it increases the average time spent on your website because people would like to navigate through the article. Especially if it has a lot of content.

If you have not added a table of contents yet, here is a quick guide that can help you to do that.

The table of contents doesn’t have to contain links to the content, but it can be helpful for user experience and SEO.

For example, if you have a table of contents with links to each chapter in an eBook, that’s a great way for users to easily jump around to different sections. But it also gives you another opportunity to link internally within your content.

In addition, I think it benefits SEO because it shows search engines more about the structure and organization of the content on your page.

How To Add Table Of Content Manual Method In Blogger

Step-1: Create a new post or open an existing post where you want

Step-2: Now switch to HTML view and the type and search for heading tags like h2, h3, etc.

Step-3: Now add Shortcodes like Below


Step-4: Now switch back to Compose view and copy all heading and paste in plain text as shown below.

Step-5: Now select 1st heading text and click on the link button and type #1 and save it.

Step-6: Now replace all plain headings with a link like #2, #3, etc, and save it.

You have successfully created an HTML table of content in the Blogger Blog post. Now customize the table of content heading and you can set the table of content in the Number list or Bulleted list

Now publish the post after the final check and your table of content is ready to use by your user.👍

in this way, you can easily create a table of content on your blogger website where posts are long and detailed.

How to add a smooth scroll effect in manual TOC

You can easily add a smooth scroll effect to the manual Table of content that we just added above using a CSS file.

Just add the below CSS file to the theme editor just above ]]></b:skin> the tag or paste it in the “add CSS” section of your theme customizer.

Copy the CSS code for smooth scroll effect

Here note that this code will work for h2 and h3 tags on the page. You can further add more tags in the above CSS code by adding tags like h4[id], h5[id], etc.

Leave a Comment