How to add Table of Contents in Blogger 2021

Friends, in today’s post, I will tell about how to add table of contents in blogger which will improve the Seo of your blog and using table of contents will also improve the readability of the post.

In the same way, the table of contents is found at the beginning of all books, in which all the headings and subheadings are present in that books, with the help of which we get to know what has been told in this books.

Similarly, if we write a long blog post, then we put a table of contents in the beginning of that post so that the readers can be easy to read.

Must read: How to download Copyright Free Images from Google?

Must read : How to approve adsense account in 2021 (Get adsense approval easily)

We can use the plugin to use the table of contents in any post in the WordPress website, but this is not possible in the Blogger website, so we will add TOC with the help of some coding.

What is the table of contents ?

Table of contents is an overview of the blog post in which the headings and subheadings (h1, h2, h3, h4) of our post remain as hyperlinks which makes it easy for the user to read the content.With the help of table of contents, the user can click and jump on any headings and the seo and navigation of our post also becomes good.

To install TOC in Blogger we need to add some Javascript, CSS and Codes.

How to add table of contents in blogger?

1. Log into your Blogger

2.Select Template or Theme and Click on “BACKUP” then Click on “EDIT HTML”.

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

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

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 will 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!

 The above method will

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()">Table Of Contents</button>      <ul id="mbtTOC"></ul>      </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>

2 thoughts on “How to add Table of Contents in Blogger 2021”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

close