How to Add Table of Contents in Blogger | Responsive & SEO Friendly 2021

How to Add Table of Contents in Blogger ?

How to Add Table of Contents in Blogger | Adding Table of Contents 2021

There are many plugins available to add Table of Contents to posts in wordpress, But in Blogger, we don’t have such plugin feature. But then, we can easily add Table of Contents (TOC) to the Blogger Website using HTML,CSS and JS. In this article, i will guide you the easiest way to Add Table of Contents to your Blogposts. Follow the given steps to add Table of content in your Blogger/Blogspot post automatically.

SEO Benefits of adding Table of Contents for Blogger

  • Google always suggests the bloggers to create well structured posts and pages. We can make the blog post well-structured and user friendly by adding a TOC – table of contents in Blogger posts. This helps in getting better results in SERP.
  • User Experience is one of the important factor of SEO that plays a vital role to get ranked high on Google Search Engine Results. Table of Contents give better user experience to the readers.
  • And if you add a Table of Contents in your blog post, then Google can display “Jump to” link in the search meta description of your site which benefits in ranking of your posts in Google search for particular headings and it can increase your Click through Rate (CTR).

Here are the Steps to Add SEO Friendly & Responsive Table of Contents in Blogger

Advice: Before making the changes to your theme, we highly recommend you to take the backup of your existing template. So that if anything goes wrong, you can restore your original template.

There are two methods to add Table of Contents in Blogger. One is Manual Method and the other is Automatic Method

Method-1: Adding Table of Contents Automatically

Adding Code to Template/Theme

Step-1: Login in to Blogger.com and Click on Theme >> Edit HTML

Step-2: Search for </head> tag and Copy below HTML Code and Paste it just above </head> tag.

<script type='text/javascript'> //<![CDATA[ //**Adding Table of Contents to Blogger Posts 
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: Next, Search for ]]></b:skin> then Copy the below CSS code and paste it just above ]]></b:skin>

/* Table of Contents Blogger CSS */
.mbtTOC {
border: 3px solid #A2A9B1;
box-shadow: 1px 1px 0 #EDE396;
background-color: #F8F9FA;
color: #830000;
line-height: 1.4em;
margin: 30px auto;
padding: 20px 30px 20px 10px;
font-family: Open Sans, arial;
display: block;
width: 70%;
border-radius: 5px;
}
.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: none;
font-family: Open Sans, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #707037;
padding: 0 0 0 15px;
}
.mbtTOC button:after {
content: "\f022";
font-family: FontAwesome;
position: relative;
left: 10px;
font-size: 20px;
}

Step-4: Now search for <data:post.body/> and replace it with the below code.

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

Step-5: Finally, Save the template, and we have successfully added required code to the theme. Now we have to add some code in Post html to show table of contents to the visitors.

Adding Code to Post HTML

Step-6: Go to the Post and Switch to HTML Mode and Add the below code at the desired place where you want to Display Table of Contents. I mostly prefer to add Table of Content after 1st Heading or 1st Paragraph.

<div class="mbtTOC">
<button onclick="mbtToggle()">Table of Contents [Hide]</button>
<ol id="mbtTOC"></ol>
</div>

Step-7: Add below JS Code at the end of the post html.

<script>mbtTOC();</script>
Note: Some Themes don’t support Automatic Table of Contents. Don’t worry, You can Try the below Manual Method which is working on all templates/themes. 

Method-2: Adding Table of Contents Manually

Step-1: Login into Blogger.com and Click on Theme >> Edit HTML
Step-2: Next, Search for ]]></b:skin> and Copy the below CSS code and Paste it just above ]]></b:skin>

/* Table of Contents for Blogger CSS */
.toc {border: 3px solid #A2A9B1;background-color: #F8F9FA;display: block;line-height: 1.4em;width: 70%;display: block;padding: 20px 30px 10px;}.toc ul li {list-style-type: none;}.toc a {text-decoration: none;}.toc strong {font-size: 20px;}.toc a:hover {text-decoration: underline;}

Adding Code to Post HTML

Step-3: Go to the Post which you want to add Table of Contents and Switch to HTML Mode and Add the below code where you want to Display Table of Contents. I would recommend you to add this code at the starting of html code.

<div class="toc">
<strong>Table of Contents</strong>
<ul>
<li> <span>1.</span><a href="#point1">Heading 1</a></li>
<li> <span>2.</span><a href="#point2">Heading 2</a></li>
<ul>
<li><span>2.1.</span><a href="#sub1">first sub heading</a></li>
<li><span>2.2.</span><a href="#sub2">second sub heading</a></li>
<li><span>2.3.</span><a href="#sub3">third sub heading</a></li>
</ul>
<li><span>3.</span><a href="#point3">Heading 3</a></li>
</ul>
</div>

Step-4: Now Give ID’s to the headings that you want to include in table of contents on that post.

See Below how we gave ID for Headings and Subheadings, you need to do the same.

<h1 id="point1"> Heading 1 </h1>
<h2 id="point2"> Heading 2 </h2>
<h3 id="sub1"> first sub heading </h3>
<h3 id="sub2"> second sub heading </h3>
<h3 id="sub3"> third sub heading </h3>
<h4 id="point3"> Heading 3 </h4>

Also Read:  How to remove date from Blogger/Blogspot Post URLs ?

How to Add Table of Contents to Website in Blogger.com (Suggested Youtube Tutorial)

Advantages of Adding Table of Content in BlogPosts:

  • It gives a Professional look to your website posts: User experience is the key to get higher ranking in SERP. TOC will help in improving User Experience of your Blog.
  • It helps the readers to easily navigate to any heading of the post: According to research, more than 75% of total online visitors only read the important points of a blog post or article. One must implement Table of Contents if the article has more headings or lengthy content.
  • And most importantly, TOC helps to get your post featured in Google rich snippets which directly helps in boosting your post ranking.

Manual Method vs Automatic Method for Adding Table of Contents

If you have basic HTML Knowledge then i would suggest you to go with manual process. Although manual method is bit time consuming but it has two major advantages:

  • Better Page Loading Speed
  • We can include Subtopics also

Frequently Asked Questions related to “How to Table of Contents in Blogger”

Why Table of Content is Important ?

Table of content (TOC) is a great way to show all the Covered topics in the blogpost, which also helps Google to understand your blog and show your content on Google’s Featured Snippets.

Do we need HTML knowledge to add the table of contents ?

No. Even if you don't have HTML Knowledge, you can easily add a table of contents to your posts. But make sure to follow steps properly.

Is it mandatory to add Table of Contents inorder to rank on 1st Page on Google ?

Yes, Table of Contents plays a key role in terms of SEO aspects. So, TOC is recommened for the posts which has lengthy content which helps in ranking a post on multiple keywords.

Does it have Negative SEO Impact on Adding Table of Contents to the Blogger Posts ?

There will be no Negative SEO Impact. Instead we Get lot of Positive Benefits.

What is the use of Adding TOC to a Post ?

Adding a Table of Contents (TOC) will allow your visitors to jump to the important part of a blog post. Which can be a breakthrough for user experience of your site.

Can we manually add Table of Contents to each post ?

Yes, We can also add a table of content manually, but it is a bit time consuming task.

Credits: I would like to give credits to mybloggingtricks and pkbaniya

Thanks for visiting Tenowl.com. Still if you have doubts, please comment below. We definitely reply as soon possible.

 

Leave a Comment