How To Add A ‘Table Of Contents’ — TOC in Blogger Post In 2021?

When you write or publish a post or article to your post, if it has a Table Of Contents aka TOC; the post looks more professional and also creates SEO value. In this post, I’ll try to cover how to add a table of contents TOC in blogger posts.

Table Of Contents TOC in Blogger Post In 2021

Table Of Contents TOC in Blogger

What is a Table Of Contents — TOC?

How to Use Table of Contents on the Website?

Nowadays like RankMath most of the popular SEO Plugins offer you to use it.

In the blogger platform, some premium blogger templates allow to use of Table Of Contents; But in this post, I’ll describe how to add the table of contents to your blogger post for free.

SEO-Value Of TOC

A blog post with a ‘Table Of Contents’ has a more professional appearance, stunning, and Eye-Catching look than a post without one.

A good table of contents will be easy to read, accurately formatted, and completed last so that it is 100% accurate to readers. So, I think you would not skip TOC to your blog post.

Get Jump Links in Google Search

Advantages Of Using Table Of Contents TOC In Blog Post

In a blog post, table of contents links are not new either but one that provides several values regardless of how search engines include them in SERP. A well-planned TOC can help us below ways:

  • Increase user experience to your website.
  • Show your contents well-structured, and well-formatted.
  • Helps to navigate easily between different content parts.
  • Increase CTR from search
  • Provide a clear and easy road map to visitor

How to add a simple table of content in blogger posts?

Disclaimer: before you apply these steps, you should take a backup to your blogger template. It’s very simple to backup. You may read this to backup your blogger website: Back up or Import Your Blog. I have added the below image to understand how to back up your blogger template or blogger website from the blogger dashboard.

Steps to create TOC In Blogger:

  1. Go to your blogger dashboard by login to the blogger
  2. Go to ‘Edit HTML’ from the ‘Theme’ option
  1. Then search </head>
  2. After that Copy the following code and paste above </head>
<!-- Table of contents Javascript start--> <script type='text/javascript'>              
//<![CDATA[
//*************TOC plugin by MyBloggerTricks.com
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';}}
//]]>
</script>
<!-- Table of contents Javascript end -->
  1. After that search (by typing ‘Ctrl+F’ in keyboard) ]]></b:skin>
  2. And copy the following code and paste above ]]></b:skin>
.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;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:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;}
.mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Here I have attached an image for a better understanding of TOC in the blogger theme!

  1. After That search for <data:post.body/>

Note:- You might found more than one code, simply replace the codes with the following codes:

<div id="post-toc"><data:post.body/></div>
  1. After doing all the steps, just save the theme.
  2. Go to Blogger Dashboard.
  3. Choose your desired post to apply to TOC.
  4. Open in HTML View
  5. Choose the right place to show TOC.
  6. Copy the Code and paste those places.
<div class="mbtTOC"> 
<button onclick="mbtToggle()">Table Of Contents ✓</button>
<ul id="mbtTOC"></ul>
</div>
  1. After that, go to the bottom of the post by scroll down.
  2. Be sure the post is in HTML view
  3. Copy the java scripts
  4. Paste the code under the post where the post will end.
<script>mbtTOC();</script>

See the below image for a better understanding of the HTML view from my blog post:

Also please see it:

After completing all these steps, just save your post. You Are All Done! Now you can see the Table of Contents -TOC in Your Blog post. Here I have attached a screenshot of TOC from this post.

Video Tutorial For Adding TOC To Blogger Post

Pro Tips For Smooth Scrolling Of TOC

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

html{
scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behaviour: auto;
}
}

Conclusion:- If you face any problems in adding a table of contents in your blogger post, just comment here with details. I’ll try my best to solve it asap. Thanks for reading this post, powered by Imam Uddin; imamuddinwp.