Add Automatic Table Of Contents In Blogger Posts

Add Automatic Table Of Contents In Blogger Posts. Please don't forget to Like, Share, Comment and Subscribe to our Techno Vedant Channel for more videos.

Table Of Contents Code:

Be sure to backup the Blogger template

1) Copy and Paste above </head> tag in your HTML Code of Blogger

More 

How To Add A Table of Contents in WordPress

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'> //<![CDATA[ //*************TOC Plugin V2.0 function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} //]]> </script>




2) Search ]]></b:skin> code and just above it paste the following CSS code:


/*####TOC Plugin V2.0*/ .mbtTOC2{ border:5px solid #0008FC ; border-radius: 10px 50px 10px 50px; box-shadow:5px 5px 5px 5px grey; border-style:dashed; background-color:#ACDEFB; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:Oswald, arial; display: block;width: 70%; } .mbtTOC2 button{ background:#ACDEFB; font-family:oswald, arial; font-size:22px; position:relative; outline:none; border:none; color:#2E2E2E; padding:0 0 0 15px; } .mbtTOC2 button a { color:#FF0313; padding:0px 2px; cursor:pointer; } .mbtTOC2 button a:hover{ text-decoration:underline; } .mbtTOC2 button span { font-size:15px; margin:0px 10px; } .mbtTOC2 li{margin:10px 0; } .mbtTOC2 li a { color:#EA1414; text-decoration:none; font-size:18px; text-transform:capitalize; } .mbtTOC2 li a:hover { text-decoration: underline; } .mbtTOC2 li li {margin:14px 0px;} .mbtTOC2 li li a{ color:#040404; font-size:15px; } .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3} .mbtTOC2 ol ol ol ol{counter-reset:section4} .mbtTOC2 ol ol ol ol ol{counter-reset:section5} .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px} .mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px} .mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3} .mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4} .mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5} /* .point2 {list-style-type:lower-alpha} .point3 {list-style-type:lower-roman} .point4 {list-style-type:disc} */

3) Search for <data:post.body/> and replace it with the code below:


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

4) Goto your blogger post. Then switch to "HTML" mode and then paste the following HTML code just before the first heading.
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>

5) Paste this code in the Html view of your blogger post in the last.

<script>mbtTOC2();</script>


NOTE: Follow the 4th and 5th steps for each post to show the table of contents in your blogger post.