How to add Automatic Table of Contents in Blogger | Insert TOC in Blogger

Step 1:

Copy & Paste the following code into your theme.

<!--TOC Java--> 
  <script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin           
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>


<!--Table of Content Styling --> 
  <style>
  .mbtTOC{width: auto; padding: 8px; background-color: #E1EDFF; overflow-x:auto; }
  .mbtTOC button {width: 50%; font-size: 15px; border-radius: 4px; border: none; font-weight: bold;
  background-color: white;
  color: black;
  padding: 8px 18px;
  cursor: pointer;}
  .mbtTOC button:hover{background-color: #5A99FF  ;
  color: white;}
  .mbtTOC li{border-bottom: 0.5px solid #D3DBFF}
  .mbtTOC li a{color: #000;}
  .mbtTOC li a:hover{ text-decoration: none; color: #4A68FF}
</style>

Step 2: 

Find <data:post.body/> and replace with following code

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

Step 3: 

Add the following code in your post where you want your table of content

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

Step 4: 

Add the following code at the End of your Post 

<script>mbtTOC();</script>

Final Result

{getButton} $text={Video Tutorial} $icon={preview} $color={#0074C9}