How to add table of contents in blogger: (5 Easy Steps)

Have you ever installed a table of contents functionality in WordPress? It's easy right...? you just install a Plugin and 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 into blogger websites to add a table of contents, so let's get straight into How to add a 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. 

What is a table of contents?
What is a table of contents?

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 it helps in SEO
How it helps in SEO


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


How to add table of contents in blogger/Blogspot Step 1
How to add the table of contents in blogger/Blogspot Step 1

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

How to add table of contents in blogger step 2
How to add the table of contents in blogger step 2

See the Pen VwKmWxL by TechNeg (@technegin) on CodePen.


Step 3: Next search for ]]></b:skin> tag and paste the css given below just above it


How to add table of contents in blogger step 3
How to add the table of contents in blogger step 3

See the Pen LYRbLJY by TechNeg (@technegin) on CodePen.


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>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button><div id="mbtTOC2"></div></div>


Post a Comment

Previous Post Next Post
close