How to add “Table of Content” in Blogger?

Would you like to rank your blog in Google and other web crawlers? Or then again need to show your site in Google's Featured Snippet Search. In the event that YES!!! at that point this post is just for you? Here, I will show you how might you accomplish these outcomes? also, how you can add the Table of substance in Blogger and Blogspot?

Truly, I concur that Content is King! Yet, do you realize that SEO is the sovereign of that ruler? so the central matter is Content and SEO both are the essential ways, that can help in positioning for your blog.

furthermore, TABLE OF CONTENT is additionally a significant piece of Content Writing and SEO. At whatever point you buy a book, you will check the chapter by chapter list of the book. Much the same as you… Google and Blog Readers is continually checking for Table of substance in each blog.

What is the Table of Content (TOC)?

Chapter by chapter list (TOC) is a rundown of themes and subtopics canvassed in the blog entry with title and point's connection in the same spot, generally found in the beginning of the blog or before the principal heading and title of the blog and article. In the event that you click on any connection of the chapter by chapter guide, it will send/leap to a particular area or theme.

How to add “Table of Content” in Blogger/Blogspot?

In WordPress, there are many plugins available to add Table of Contents to posts, with the help of these plugins, you can easily create a table of contents for WordPress but on Blogger platform, you have to use HTML to create Table of Content(TOC).

To create a table of contents, you do not need a lot of HTML knowledge. You can easily add a table of contents to your posts even if you know a little bit basic of HTML.

If you do not any knowledge of HTML, NO MATTER because if you follow this post well, you can easily add TOC to your post. We can also add a table of content manually, but its a very time-consuming task.

But as I told you most of the time, only the long posts require a table of contents, so do not waste your time by adding TOC in short post and add the table of contents to long posts so that readers can get good reading experience.

Before we start customization and coding, please save the backup of your template, as if something goes wrong, you will always have to option to restore the old version. Let’s Get Started.

Follow the below steps to add Table of content in your Blogger and Blogspot post automatically:

Step 1 : Login to your Blogger blog and click on Theme -> Edit HTML

Step 2 : Search </head> tag and Paste below HTML Code 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>

Step 3 : Next, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>, Just like below Image

.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 : Now, Search for <data:post.body/> and replace it with the code below

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

Step 5 : Save the template and you are all done!
Step 6 : Choose the Table of content Box Location

Best place to show the Table of content is before the First H2 Tag. You can change as per your choice.

Go to the specific blog post to add TOC, Switch from Compose to HTML.

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

Step 7 : Add below code at the end of the Blog

<script>mbtTOC();</script>

Result