Last Updated on June 25, 2023 by Ajay Kumar
Have you ever installed a table of contents functionality in WordPress? It’s easy right…? you just install a Plugin and are done! But what about blogger/Blogspot websites? Well, blogger doesn’t have any plugin system like WordPress so it’s a little bit tricky to add a table of contents in blogger, you have to manually add codes to blogger websites to add a table of contents, so let’s get straight into How to add table of contents in blogger.
What is a table of contents?
The straight answer is a table of contents is a summary of the article you have written, it acts as navigation for the user so that he can easily access and navigate your content, like the first Index page on your Books.
How it helps in SEO
Google always loves to crawl a neatly coded website with properly formatted content. The better the code the better chances to appear in SERP results. The table of contents will give the crawlers an idea about what your content is all about. By adding a Table of content to your article, you may also appear in the top featured snippet.
How to add the table of contents in blogger/Blogspot?
Step1: login to your Blogger/Blogspot and open the theme editor of your respective blog
Step2: Click anywhere inside the HTML editor and press CTRL+F, and search</head> tag, now paste the code given below just above the </head> tag
Step 3: Next search for ]]></b:skin> tag and paste the css given below just above it
Step3: Finally search for <data:post.body/> and replace it with
<div id="post-toc"><data:post.body/></div> Step4: Go to your blog settings and paste the following code in the Post Template Section:
<script>mbtTOC2();</script>Step5: Now, to show it, paste the following code at where you want the table of contents to appear:
<div class="mbtTOC2"> <button>Content<span>[<a onclick="mbtToggle2()" id="Tog"><hid</a>]</span></button> <div id="mbtTOC2"></div></div>
