How to add Table of Contents in Blogger

Unfortunately, there is no plugin to add an automatic Table of Contents (TOC) for Blogspot Bloggers, but I found HTML codes through which bloggers can add TOC to their blogs. So in this blog post, I will explain "How to add Table of Contents in Blogger".

Table of Contents (TOC) is an essential part of blog posts. It helps users to understand what are the elements included in the blog and what topics it covers.

So I will show you guys how to add an Automatic Table of Contents in Google Blogger websites by two methods with the help of HTML codes. You can see that these methods work because I am using a TOC on this blog post (powered by Blogger).

Before that, we see about Table of Contents.

What is Table of Contents

Table of Contents, abbreviated as TOC is a list that contains chapters, sections, or topics of any writings along with page numbers.
It is usually present in the first pages of books, essays, blog posts, research papers, guide books, courses and etc.

It's a roadmap or guide to a book.

What is Table of Contents in Blogging

Table of Contents (TOC) helps blog readers to understand what are all the headings/subheadings that the blog post is covering.
It is very helpful for readers by allowing them to jump to the desired topic in the blog without scrolling from the top.

There are two types of HTML codes to add Table of Contents (TOC) to your blogger website. You don't have to do both, the 1st method is enough but when it doesn't work then use the 2nd method.

Method 1 - Using Bloginos Code

In order to add a table of contents on your website follows the below methods.

Log into your blogger account.

From the left navigation panel, select "Theme".

Now from the main page select "Edit HTML" as shown in the below image.

Fig 2

It will open up the HTML editor and in it, you will find the HTML codes of your website, like in the following image.

Fig 3

Click inside the HTML editor and open the search by pressing CTRL+F (on Windows) or Command+F (on Mac).

Find </body> and paste the following codes below it, as shown in the following image.

<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>

Fig 4

Now paste the below codes in between <style> and </style> as shown in the below image.

/* TOC by MFK (bloginos.com) */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
*/

Fig 5

Now save your Theme.

Open the post to edit for which you want to add, switch to "HTML" mode, and add the following codes above the first Subheading, as shown in the below image.

Fig 6

Update your post and the TOC will appear on your blog post.

Do Step 7 to all the blog posts that you want to Table of Contents for it.

So this is Method 1 to add a Table of Contents to a blogger powered website.

In case if it doesn't work on your blogger website, it's due to your Theme. Don't worry just use Method 2.

Read: Enable Meta Description in Blogger (Blogspot): Step-by-Step 2020 Guide

Method 2 - Using Modified Bloginos Codes

Log into your blogger account.

From the left navigation panel, select "Theme".

Now from the main page select "Edit HTML" as shown in Fig 2.

It will open up the HTML editor and in it, you will find the HTML codes of your website, like in Fig - 3.

Click inside the HTML editor and open the search by pressing CTRL+F (on Windows) or Command+F (on Mac).

Find </body> and paste the following codes below it, as in Fig 4.

<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>&quot;;$(&quot;.post-body h2, .post-body h3&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;.post-body h2,  .post-body h3&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}
</script>

Now search for ]]></b:skin> and paste the following codes just above it, as shown in the below image.

.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}

Fig 7

Now save your Theme.

Open the post to edit for which you want to add, switch to "HTML" mode, and add the following codes above the first Subheading, as shown in Fig 6.

Update your post and the TOC will appear on your blog post, as shown in Fig 8.

Fig 8

Do Step 7 to all the blog posts that you want to Table of Contents for it.

Use this method only when the first one doesn't work for you. You can see that this blog post has TOC which is done using the second method.

Disclaimer: These two codes aren’t created by me. The first one was developed by Bloginos and the second one was just a modification of the first one. It was modified by 237Solution, so all credits to them.

Read: Ubersuggest - Best Free Keyword Tool

How Table of Contents work

When you add codes from any of those methods in your website and blog posts, it will collect the Subheadings you used within the whole post and gave them a unique id to each subheading.
Thereby it acts as a link and when you click any of those subheadings it will take directly to that topic.

Benefits of adding Table of Contents in Blog Post

1) Reduces Bounce Rate

It helps bloggers to reduce their bounce rates by allowing readers to cover only subheadings and make them jump to their desired topic.

Most visitors when they see 3000+ words long blog posts they lose interest to read everything and it may make to leave your website within several seconds. So when you're adding a Table of Contents (TOC) to your blog post it encourages visitors to read only the topic they want to know about.

So there's by it helps to keep visitors on the page without bouncing off.

2) Updated in SERPs

When your blog post (without TOC) appears in SERP it will appear like the below image.

But when your blog post has a TOC included it will appear the option to jump directly into the Subheading in your blog post they're looking for. It will appear on the SERPs like the below image.

So thereby it helps your website to get clicked more by the users when it appears on the SERPs.

3) Boost SEO

Everybody knows that Google and other search engines like well structured and detailed blog posts or web pages.

So adding TOC on your blog post enhances the structure of your blog posts which results in good SEO of your page and it also adds the "Jump to" links in the meta description of your blog posts when it appears on SERPs.

4) Improve User Experience

According to a study by NN groups on "How Users Read on the Web", it's found that 79% of their test users only scanned any new page they come across and only 16% read word by word.

This means that only 16% of their test users read the web page, most people just scan the web page.

So in order to convert 79% scanners into readers, you should make your blog more structured, detailed, and user friendly.

When you add Table of Contents (TOC) I'm your blog posts it allows that 79 % of users to get to know what are the topics that your blog post is covering and they can jump to the desired subheading by just simply clicking it on TOC.

When Table of Contents is not needed in Blogging

There are several advantages to adding TOC but it's not always required.

TOC is not required for,

1) Response Posts

Response posts usually have only 1300+ words long and it's doesn't cover several topics since they're focusing on answering a specific query.

2) When there are no several Subheadings:

Adding TOC is to help users to quickly scan your content by providing all subheadings in a single place. Since your blog posts don't have several subheadings (>=3) then it's kind of optional not to add TOC.

So if these are some cases when it's optional not to add TOC.

Conclusion

Thus there are two methods to add an automatic Table of Contents in blogger.

You can see the benefits of adding it later on. It also helps Google and other search engines to crawl your web pages and your website faster.

But make sure you, it doesn't affect your blog post appears and it doesn't look crappy. Keep it plain and simple. You can change the color and size of the TOC by just modifying the HTML codes. Make sure it fits your blog's appearance and theme.

That's all about the Table of Contents for Blogger.

If you want to learn more about Blogging and SEO then I suggest you guys check out my following articles.

Read - 12 [Most Helpful] Podcasts for Bloggers (Infographic, Comparison Table).

Read - Google Keyword Planner without Ad Campaign.

Read - 8 [Best] YouTube Alternatives where you can make a Living.

Stay connected with this website to receive tips about Blogging.

If you like this article, please share it to help other others who are all struggling with this same problem that you're facing, and after all,

Sharing is Caring.

Thank you, Have a nice day.

How to add Table of Contents in Blogger - 2 Easy Methods (with Pictures)

What is Table of Contents

What is Table of Contents in Blogging