How to Add Table of Contents in Blogger 2022 [Latest]

A table of contents in Blogger is possible. In this post, I am going to demonstrate How to add a Table of Contents in Blogger or Blogspot using TOC javascript.

How to Add Table of Contents in Blogger 2022 [Latest]

Welcome Bloggers, in this blog post I am going to demonstrate How to add a table of contents in Blogger or Blogspot post. I hope you all are aware that, Google Blogger or Blogspot does not allow plugins like WordPress, However, with the help of this post you can easily create a lightweight Table of Content for your blog post. So In this post, I will demonstrate step by step method to install TOC for your blog post and pages.

What is a Table of Contents?

A Table of Contents or TOC is a small piece of content in a tabular format which is usually seen before the first part of a post or article. It lists down all the headings or sub-headings of your posts or articles in a table.

What is an Automatic Table of Contents?

Automatic Table of Contents permits us to arrange all the headings and subheadings tags from your blog post automatically without manually characterizing the heading tags and makes it into a pleasant table for your audience to navigate.
Whenever you visit Wikipedia, you find TOC on each and every article you read, right! Doesn't it make us simple to explore the article and hop directly into that specific passage or point? Obviously, it does, and it's because Wikipedia automatically selects the heading labels and prepares a Table of Contents out of it.

What are the advantages of using Table of Contents?

As you know that TOC appears just above the start of your posts just after the first para. Your audience can simply take up a few lines on the top page of your whole post.
Therefore, a well-planned Table of Content can adversely help in:
  • Give a professional look to your post or article.
  • Arrange points of your post or article in a systematic way.
  • Managing your audience's expectations, since it provides a high-level view of your posts or article.
  • Providing a roadmap for your audience to easily navigate your whole post or article.

Can TOC Improve User Experience?

User experience is a significant part of a blog post or article, which lots of Bloggers nowadays don’t take seriously.
Do you know, according to research, user experience is the key to getting a higher ranking in SERP. And to improve the user experience of your blog, the table of Content will help.
According to research, more than 80% of total web readers only read the important points of a blog post or article. One should implement TOC only when the article or post length is good enough and the article or post has more than 3 headings.

    ContentsDoes the Table of Contents Improves SEO?

    Of course, a Table of content can help in SEO as well. Check out the reasons -
    When you write a long post or article and create a table of Content, your content gets divided into sub-sections, each with different aspects on the same topic.
    So, with a longer blog post or article, your blog is likely to rank better in search engines Do you know that Google considers longer posts as a ranking factor.
    It also increases the Click-Through-Rate or CTR of your website as Google displays a ‘Jump to Section link’ crawled from the Table of Contents of your blog post or article and displays the most relevant result to the users.

    Features of this TOC Plugin

    • This plugin is coded in JavaScript and CSS.
    • It has been designed in such a way that it won't load until your entire webpage is loaded.
    • It is lightweight and won't affect your page load time.
    • This plugin is SEO-friendly and will help to rank your page in search engines.
    • This plugin contains a toggle button to hide and unhide TOC.
    • It is highly customizable and responsive.
    • The best part is, this plugin executes only when invoked. That is you can enable or disable TOC on a specific page or post.

    Advice - It is highly recommended to backup your existing template before customizing or making changes to your template as if something goes wrong, you can restore your original template.

    Follow the below steps to add TOC in Blogger:

    How to add a table of contents in blogger?

    1. Log into your Blogger

    2. Select "Template or Theme" and click on "Three Dotsthen Click on "EDIT HTML".

    3. Now search for the </head> and paste the below script just above the </head> tag.

    4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.

    5. Lastly search for the <data:post.body/> , there can be more       than  <data:post.body/> tag , Replace all of them with below code.

    <div id="post-toc"><data:post.body/></div>

    6. The coding part ends here, Click on "SAVE" and you are all done!

    How to show TOC in a blog post?

    In order to activate TOC in your Blog post or article, while writing a new post switch to "HTML" mode and then paste the below code just after the first paragraph or before your first heading tag.

    Activating TOC in a blog post

      To active, the TOC plugin pastes the below Javascript code after the end of your post.
      Hit the Publish Button and Boom! TOC has been generated successfully.


      I have tried to keep this guide as simple as I can, also I have minified all the codes
      which will not affect your blog's page speed. I hope, you found this post on how to
      table of contents in blogger helpful. If you encounter any errors or issues comment
      below and I would help you to figure it out. This plugin was created by MBT and all
      credits go to the owner of MBT.

      Post a Comment

      Please Don't Spam. Comment are Reviewed By the Admin.

      Previous Post Next Post