How to add Table of Contents in Blogger

Add Table of Contents in Blogger 2022 

Invite Bloggers, in this article I am mosting likely to show how to include tabulation in Blogger or Blogspot post.
I hope you all understand that, Msn and yahoo Blogger or Blogspot doesn't permit plugins such as WordPress, However, with the help of this post you can easily produce a light-weight Table of Content for your article. So In this post, I will show detailed technique to install TOC for your blog site web pages and post.

What is a Table of Components?

A Table of Components or TOC is a small item of content in a tabular style which is usually seen before the first component of a message or article. It lists down all the headings or sub-headings of your messages or article in a table.

What is Automated Table of Components?

Automated Table of Components permits us to arrange all the headings and subheadings tags from your blog-post immediately without by hand defining the going tags and makes it right into an enjoyable table for your target market to browse.
Whenever you visit Wikipedia, you find TOC on every single article you read, right! Does not it make us simple to explore the article and jump straight right into that specific flow or point?
Certainly, it does, and its because Wikipedia immediately selects the going tags and prepares Table of Components from it.

What are the benefits of using Table of Components?

As you know that TOC shows up simply over the begin of your messages after the first para. Your target market can simply take up a couple of lines on the top web page of your entire post.
Therefore, a well-planned Table of Content can negatively help in:

Giving a professional appearance for your post or article.
Arranging factors of your post or article in a methodical way.
Managing your audience's assumptions, since it provides a top-level view of your messages or article.
Providing a roadmap for your target market to easily browse your entire post or article.

Can TOC Improve User Experience?

User experience is a considerable component of an article or article, which great deals of Bloggers nowadays do not take seriously.
Are you aware, inning accordance with research, user experience is the key to obtain greater position in SERP. And to improve the user experience of your blog site, the table of Content will help.
Inning accordance with research, greater than 80% of total internet visitors just read the important factors of an article or article. One should implement TOC just when the article or post size suffices and the article or post has greater than 3 headings.

Does the Table of Components Improves SEO?

Of course, Table of content can help in SEO as well. Inspect out the factors -
When you write lengthy post or article and produce a table of Content, your content obtains split right into sub-sections, each with about various aspects on the same subject.
So, with a much longer article or article, your blog site is most likely to place better in browse engines and Are you aware that Msn and yahoo thinks about much longer post as a position factor.
It also increases the Click-Through-Rate or CTR of your website as Msn and yahoo displays a ‘Jump to Area link' crawled from the Table of Components of your article or article and displays one of the most appropriate lead to the users.

Features of this TOC Plugin

This plugin is coded in CSS and JavaScript.
It is designed in such a manner in which it will not load until your whole webpage is packed.
It's light-weight and will not affect your web page load time.
This plugin is SEO pleasant and will help to place your web page in browse engines.
This plugin includes a toggle switch to unhide TOC and conceal.
It's highly receptive and adjustable.
The best component is, this plugin performs just when invoked. That's you can enable or disable TOC on a specific web page or post.

"Advice - It is highly recommended to backup your existing template before customizing or making changes to your template as if something goes wrong, you can restore your original template."

 

Follow the below steps to add TOC in Blogger:

How to add table of contents in blogger?

1. Log into your Blogger

2.Select "Template or Theme" and click on "Three Dots" then Click on "EDIT HTML".

 

 3. Now search for the </head> and paste the below script just above the </head> tag.

 

<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
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> 

 

4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.  

.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}

5. Lastly search for the
<data:post.body/> , there can be more than 1
<data:post.body/>
tag , Replace all of them with below code.

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

6. The coding part ends here, Click on "SAVE" and you are all done!

How to show TOC in blog post?

In order to activate TOC in your Blog post or article, while writing a new post switch to "HTML" mode and then paste the below code just after the first paragraph or before your first heading tag.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
    </div>

Activating TOC in blog post

To active the TOC plugin paste the below Javascript code after the end of your post.

Hit the Publish Button and Boom! TOC has been generated successfully


<script>mbtTOC();</script>

 

 

I hope, you found this post on how to table of contents in blogger helpful. If you encounter any error or issues comment below and I would help you to figure it out.