For More Updates you can SUBSCRIBE to our Youtube Channel for FREE! Subscribe Now!

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


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'>              
//*************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';}}           

<!--Table of Content Styling --> 
  .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}

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>

Step 4: 

Add the following code at the End of your Post 


Final Result

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

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Help us to Improve our service

  1. Bhai step - 1 code < head > ke bad paste karna hai, wo yo likho.

    1. Ap simple ye steps follow krlo, Work kry ga. lazmi nahi hai head tag mein lgao


Help us to Improve our service

Join the conversation(2)

buttons=(Accept !) days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top