How to add automatic table of contents in blogger using Javascript and html

Copy the code below and paste  above </head> tag in your XML file of your  blogger website.

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

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

/*####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:non
.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}
*/    

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

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

Now open your any blogger post After that switch to html mode and paste the following code just before your first heading.

<div class="mbtTOC2"> 
<button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button> 
<div id="mbtTOC2"></div> 
</div>

Paste the following code in the html view of your blogger post at last.

<script>mbtTOC2();</script>

NOTE:- follow last two steps to show table of contents in you blogger post .