Home
Blogger Guide
Coding Guide

How to add a Table of Contents in Blogger on 2022 Easy Method

add Table of Contents in Blogger

Hi Dude, Let's see How to add a Table of Contents in Blogger. The Blogger always supports Table of Content. but you want to edit some Javascript and HTML Script on your Blogger theme. So, we can demonstrate how to add TOC to your Blogspot website. This Table of Content HTML and Javascript is 100% Using Pure Javascript and Html Script.

Welcome to All Bloggers, in this blog post we are Explain How to Add a Table of Contents to the Blogger website Or Blogspot.com Posts.

We hope you know that Blogspot or Blogspot.com does not allow third-party plug-ins like WordPress for all bloggers. So, we've given you a simple and short way to add TOC to your Blogger or Blogspot.com.

This table of contents script is made up of simple and lightweight JavaScript and HTML scripts. So, you do not have to worry about your website size and load time. Your Blogger or Blogspot website always runs normally and properly. We will explain the step-by-step instructions on how to add a table of contents.

What is a Table Of Content?

A Table of contents is a list of all the subheadings on your webpage. It divides your website into separate sections based on its sub-headings. Also, the user can understand the comments on the web page and just need to know the topic by clicking on the table of contents and go directly to that part of the web page.

What is an Automatic Table Of Content?

Automatic Table of Contents can operate slightly differently than manual Table of Contents. It automatically detects all the titles and subheadings of the webpage on your website and converts it into an Automatic Table of Contents on your webpage. Once you install it, it will automatically start creating the Table of Contents.

This will make it easier for the users of your website to have a better experience. This will also help the readers of your website to go directly to the desired area on the website page and read the Table of Contents directly.

We think you've seen the use of Table of Contents on leading websites like Wikipedia. Wikipedia Using this Table of Contents you can see that they divide the information on the webpage into separate parts.

This will help the users of the website to understand the concept and know its content in advance. And this
The Table of Contents is created automatically on that website. No one is creating this.

We have given on this web page a Table of contents script that works like this.

What are the advantages of using Table of Contents?

We think you know that the Table of contents on the website should be installed just below the first paragraph. Because only then can the views on your website be quickly viewed and benefited. Now, look at some of the benefits of this table of contents below.

A great Table of contents definitely brings the following benefits to your website.

  • This gives your website an easy to use and well-rounded look.
  • Sorts all the topics on your webpage by points.
  • This not only satisfies the needs of your website visitors but also gives a superior viewing and reading experience.
  • This gives your website visitors a roadmap of your website. This will make it easier to use all the information in your entire webpage.
  • This will definitely increase the volume of visitors to your website.

What is the effect of the Table of Contents on SEO?

Of course, the table of contents takes up a large part of the SEO development of your websites. Of course, a table of contents helps SEO your websites. This table of contents allows you to analyze your blog post and provide support for Google bots and crawlers. So, Google Bots and Crawlers are all about reading content links and increasing Google rankings.

Google works to rank the best posts in search engines. Table of Contents is Give Professional look to Blogger or Blogspot.com Website. Therefore, the content table also increases your website ranking. It improves your CTR (click-through rate) on the website. So, adding a table of contents to your website will definitely give you some SEO benefits.

How can TOC improve the user experience?

User experience is very important for all websites. Because user experience is determined by your website view. so, Many More bloggers take this matter seriously. table of contents always provides a better user experience and makes your webpage easier to understand user experience is the access card to get more traffic on your website page.

In research, more than 85% of people only read the important things on your website. So, You Can Understand this part user experience is why important on a website. and, Table of Contents Always helps to give a good level of user experience.

TOC(Table Of Contents) makes it easy to manage the content length of your website. So, the user can easily explore your website page.

TOC Plugin Features

  • This Table of Contents plugin is made by pure javascript, HTML, and CSS.
  • This Table of Contents Script is Light weight
  • This Table of Contents Script is does not Affect your website Loading Speed.
  • This Table of Contents Blogger Plugin is given many more SEO Benefits to your blogger or blogspot.com website. So, this Script is helped to improve your website ranking and volume of Visitors.
  • This TOC Blogger Plugin is Responsive and Customisable
  • This Plugin comes with a toggle button to hide and unhide TOC Button.
  • This is the best part of this TOC Blogger Plugin, designed to work only when users press the TOC Plugin Section.
  • This Blogger TOC Plugin is shown after full site Loaded.
  • You can Enable or Disable this Blogger TOC Blogger Plugin on a specific pages or Posts

You want to download this table of contents Script Bundle on your device. please Hit the download button and download all script bundles on your device.

How to add a table of contents in blogger?

Step 1: Log in to your Blogger Dashboard and Go to Theme Section

Step 2: Click the "Edit HTML" Option on Dropdown Menu

Step 3: Press Ctrl+F and find <head/> Tag on your Theme.

Step 4: Copy the JavaScript on Downloaded File and Paste the Script Above on <head/> Tag

Step 5: Next, Again Press Ctrl+F and Find ]]></b:skin> Tag on your Blogger Theme

Step 6: Copy the CSS Script on Downloaded file and Paste the css script above on ]]></b:skin> Tag

Step 7: Next, Again Press Ctrl+F and Find <data:post.body/> Tag on your Blogger Theme.

Step 8: Copy the Below Script and Replace the <data:post.body/> Tag on your Blog Theme. 

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

Step 9: Well done. your TOC Block is Ready To Use

Adding Table of Contents to blog posts?

Step 1: Next Come Back and Go to your Post Section and Open the Post you want to add TOC(Table Of Contents).

Step 2: Change Post Format on Compose Mode To Html Mode.

Step 3: Copy the Below Html Script and Paste the Post Section on you want to add Table Of Content(TOC). 

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 
    </div>

Step 4: Next, Go to your PostScript Ending point and Copy the Below Script on Your Clipboard 


<script>mbtTOC();</script>

Step 5:Paste the Copied Script on your Blog post Script Ending Point

Step 6: Well done Your TOC is ready to shows Table of Content

Video Guide

Final Words

This Blog Post " How to add the table of Contents in Blogger" is helping to add a table of contents to your Blog.

Please do these things to help our Pixabin Blog.

Thank you for Reading this Article and Keep Support on my Blog.

2 comments

  1. Test comment
  2. Really Help ful BRO and Its Profectly Working