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.
How to add Table of Contents in Blogger
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. - It will open up the HTML editor and in it, you will find the HTML codes of your website, like in the following image.
- 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. - Now paste the below codes in between <style> and </style> as shown in the below image.
- 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.
- Update your post and the TOC will appear on your blog post.
 |
| Fig 2 |
 |
| Fig 3 |
<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 |
/* 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 |
 |
| Fig 6 |
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. - Now search for ]]></b:skin> and paste the following codes just above it, as shown in the below image.
- 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.
<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$(".post-body h2, .post-body h3").attr("id",function(arr){return "point" + arr;});$(".post-body h2, .post-body h3").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>
.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 |
 |
| 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.
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.
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.
![8 [Easy] steps to customize Blogger Template](https://1.bp.blogspot.com/-s8svivvu7f4/XmOT8318kJI/AAAAAAAAKxk/xjB-6lDhRKs-5bcjMf2ATzwGbYVxxOykwCLcBGAsYHQ/w680/customise%2Bblogger%2Btemplate.jpg)
){kind=link}
0 Comments