How to Add Table of Contents on Blogger Blog Post?

Table of Contents is very important for a blog or website. Table of Content is very important for SEO. If you put Table of Content in your blog/website, then there is more chance of your blog post being ranked. It is easy to add it on  WordPress , you just have to install a plugin and you are done.

But to add Table of Content on Blogger, you will have to do some hard work. But you do not need to worry at all, I will give you complete information in details.

Read More: How to Add Author Box With Social Media Icon in Blogger?

What are Tables of Contents?

Whenever we visit any big website, you must have seen that all the Heading and SubHeading appear in the same place in the post/article. 

This has the advantage that whatever you want information about, you have to click on that heading. After this you will reach the same paragraph. 

Due to Table of Contents, visitors do not have to read big articles/posts. By adding table of contents to the blog, your blog/website becomes user friendly. Because of this, such articles or blog posts rank higher on the search engine.

How to Add Table of Contents to Blogger Post?

To add Table of Contents to Blogger Blog/Website, you will have to add some Html Code to your blog.

  • Log into your Blogger
  • Select “Template or Theme” and click on “Three Dots” then Click on “EDIT HTML”.
  • Now search for the </head> and paste the below script just above the </head> tag.
<script type='text/javascript'>              
//*************TOC plugin           
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
  • Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}
  • Lastly search for the <data:post.body/> , there can be more than 1 <data:post.body/> tag , Replace all of them with below code.
 <div id="post-toc"><data:post.body/></div>
  • The coding part ends here, Click on “SAVE” and you are all done!

How to show Table of Contents in blog post?

  • Now wherever you want to add Table of Contents to all your posts/articles. The Html Code given below has to be pasted at the same place.
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
  • Now you have to paste this last Html Code in the Last (End) of all your Post/Article.

Table of Contents Not Working

If the Table of Contents is not working on your Blog Post / Article, then what can be the reasons for this?

Contents will be seen written on your blog post, but the headings in the post / article will not be showing. 

  • So in such a situation, all the Headings you have created on Blog Post will have to be made Sub Heading.
  • You have to change your Headings to H3 by clicking on the Html View of the post.

 If still Heading Show is not happening in Table of Contents.

  • So in this case, by going to Edit Html in Theme, see that <data:post.body/> will be in two places in your Theme.
  • If there is <data:post.body/> in two places, then the Html Code you replaced with it. 
  • It has to be removed from here, and replaced with the other <data:post.body/>.

After doing just this, the Table of Contents Not Working Problem will be solved in Blogger

How did you like it, do tell in the comments. Also, if you are having any problem related to blogging, then you can Dm me on Contact Us from.

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment