How To Add Table Of Contents in Blogger Easily in 2023 (with Screenshot)

A table of contents in Blogger post is very helpful for visitors to understand the blog post and it will increase engagement.

A table of content in Blogger posts will help visitors to find the exact content the user wants to know. A table of contents in a blog post has also huge SEO benefits, search engines like Google may index particular headings & show them on SERP which will drive more traffic to your blog.

Also Read: How To add FAQ schema in Blogger post easily

It is very easy to add table of contents in WordPress, you have to just install a TOC plugin and that will do your work. But adding a table of contents in Blogger is not so easy but possible to add an automatic table of contents in Blogger posts.

Do you want to know how to add table of contents in Blogger blog easily?

If your answer is ‘YES’ then you have to read this blog post completely, In this blog post I will share a step-by-step guide on how to add a table of contents in Blogger. I will share 2 methods to create a table of contents in Blogger easily. After reading this blog post you will be able to add an automatic table of contents in Blogger or add a table of content manually in your Blogger blog posts.

What is a Table of Contents

A table of contents in Blogger is a tabular format of a blog post on the website which gives a structured overview of the post. In this tabular format, all headings and sub-headings related to the blog post are listed. All these headings & sub-headings of the post are visible to the users in the form of links.

When a user visits a webpage, they can understand what information is there in that blog post through the table of contents. Some users may need to read the content only under a particular heading so they will go there.

If your website has very long content it’s difficult for users to find particular information in the blog post but a table of contents will be helpful. So if you have written lengthy content in your Blogger blog then you should add a table of content in Blogger in 2023 for SEO benefits & ranking.

Also Read:- How to remove date from Blogger post URL

Benefits of Table of Contents in Blogger

The first advantage of adding a table of contents will be that users will get a good experience from your blog post, and users’ experience matters a lot to Google.

When users get a good experience from a website, then Google ranks that website high, so you have to take special care of this.

TOC will give a professional look to your blog post. Due to this users will see your blog post as a WordPress website. TOC will arrange all the headings and subheadings of your blog post in a systematic way.

There is no Table Of Contents sitemap but it has something like a quality sitemap. This will act as a roadmap for the visitors visiting your blog post.

Also Read: How to set a password for Blogger posts

SEO Benefits of Table Of Content (TOC)

Google always loves well-detailed and well-structured blog posts and pages. And by adding a table of content in Blogger blog posts, you make your blog post well-structured and user-friendly. add a table of content in blogger to get a better result.

And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.

Improve User Experience

According to research by NN Group, more than 79% of total web readers are scanners who only read the important points of a webpage. We also love to read well-detailed articles.

User experience is a very important thing to get a higher ranking in SERP (Search Result Page). User experience is a very important part of a blog to rank faster. And a table of content will help you to improve the user experience of your blog.

Adding a TOC in Blogger will allow the readers to jump to the important parts of a blog post. It will be easy for a reader to understand the content.

How To add Table of Contents in Blogger

Below, I am sharing two methods to add a table of contents in Blogger post. Using method 1 you can add an automatic table of content and by following method 2 you can add a table of content in a blogger posts manually.

Method 1: By adding Script in Template & Post

I will guide you step by step to add a table of contents in Blogger. I have explained this process in 6 simple steps.

Step 1:- First login to your Blogger Blog in which you want to add a table of contents (TOC). Click on Theme and then click on edit HTML. (as shown in the screenshot).

Step 2:- Find </head> in the HTML file and paste the below-given code just above the </head> tag as shown on screenshot.

copy and paste this script just before the </head> tag on your Blogger template.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>              

//<![CDATA[                      

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>

Step 3:– Find ]]></b:skin> code in your Blogger template and paste the below-given code just above this tag. (You can see the screenshot below).

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;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:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Step 4:– It’s a very easy step. Find <data:post.body/> code in your theme and replace with a new code given below. If your theme has this code more than one time then you have to replace all of them with this new code.

<div id="post-toc"><data:post.body/></div>

Step 5:– Click on HTML view and paste the below given code where you want to show table of content in Blogger post.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

Step 6:- And add this code below the text, as you can see in the screenshot.

<script>mbtTOC();</script>

Boom, Now you can see a Table of Content in the Blogger posts. You have to add these two codes on every page or post where you want to show a table of contents in Blogger.

You can choose where you want to show the table of content, before the first heading or after the heading, you have to just paste the script.

If you want to change the colour of any elements, then you can easily change it in simple steps. Find the default style and colour of these all code and you can change them as per your choice. You can Change Font, Font Colour and Font Style.

• Change background color #FFFFEO
• Change font
• Change border color #f7f0b8
• Change font color #707037
• Change Anchor link color #0080FF
• Change the font size of anchor Links 15px
• Change the font size of TOC heading text 20px
• Know HTML code of colour here https://htmlcolorcodes.com/

Check if you followed all the steps correctly. You can preview your blog post, Either the table of contents in Blogger is showing or not. If you face any issues, please take help of this video.

If you change your Blogger template then you have follow these steps again to keep table of content in Blogger.

Method 2: Manually Add table of contents in Blogger

You can also add a table of content Blogger post manually without using any script. Adding a table of contents in Blogger manually is a very easy task and I will share a step by step guide here. Just follow this simple method to add a normal table of content in Blogger post & page. But please remember if you add a TOC in Blogger manually you can’t change the style of that TOC in Blogger. To add table of content in blogger manually you don’t need to add any script to your Theme, And if you change the theme of your Blogger blog it will not affect your TOC in blogger (it will remain unchanged).

Conclusion

There are lots of benefits of adding a table of contents to Blogger posts. You can add an automatic TOC in Blogger or add it manually, both have the same importance. I would suggest you add a table of content in blog posts for better SEO & rankings in 2023.

Frequently Asked Questions

In this blog post, I have tried my best to share how to add a table of contents in Blogger. I hope this was helpful for you to create a table of contents in Blogger, Kindly share this blog post on your social media with others.

Connect with us on social media and subscribe to our YouTube channel. Join our Facebook and Telegram groups where many experienced bloggers discuss blogging, affiliate marketing and other money-making tricks.