Add Automatic Table Of Contents In Blogger (No Manually)

Share on:

Curious To Know How To Add Automatic Table Of Content In Blogger Post’s Without Manually Add Code In Each Blog Post’s.

Add Automatic "Table Of Content" In Blogger Post's (No Manually)
Many Blog Help You To Add Table Of Content In Blogger But For Doing It You Have To Add TOC Code Manually In Every Blogger Post’s.
That Is Very Boring And Not Every Person Blogging On Blogger Can Do This In Long Time.
That’s Why Google Blogspot Blogger’s Search Automatic Table Of Content Plugin For Blogger But , We All Know That Blogger Not Support Plugin’s We Have To Integrate Codes Manually On Blogger.

What is Automatic Table Of Content 

This makes good table of contents for our readers to automatically navigate all the various headings and subheadings from their blog posts without manually defining the TOC.

Does Blogger Support Automatic Table Of Content 

Blogger Does not support Automatic Table Of Content. blogger has some Limitations when you use it use will feel. But , Now I Am Doing Full Time Blogging In Blogger ( Blogspot ) And Find A Way To Add Table Of Content Automatically In Blogger Post’s.  
 

Features Of This Blogger Automatic TOC

  • Look Professionl.
  • Increase UI.
  • Show All h1, h2, h3, h4 In Table Of Content.
  • No Need To Add Manually Integration Of Code In Post.
Also Read:  Top 5 Reasons Why You Are Not Making Money From Blog
 

How To Create Automatic Table Of Content In Blogger Post

1. Login To Blogger & Select You Blog You Want To Add TOC.
2. Click To Theme Section And Choose Edit HTML.
Automatic "Table Of Content" In Blogger

 

3. Search For </head> Tag And Paste Below Code Before This.
How To Create Automatic Table Of Content In Blogger Post

<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>

<script type=’text/javascript’>

//<![CDATA[

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>

4. Again , Search For  ]]></b:skin> Or ]]></b:template-skin>  And Paste Below Code Before This.
 
How To Create Automatic Table Of Content In Blogger Post

 

 

.mbtTOC2{border:1px solid ##f7f0b8;background-color:#ffffe0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;font-family:Oswald,arial;display:block;width:80%}.mbtTOC2 button{background:#ffffe0;font-family:oswald,arial;font-size:22px;position:relative;outline:0;border:0;color:#707037;padding:0 0 0 15px}.mbtTOC2 button a{color:#0080ff;padding:0 2px;cursor:pointer}.mbtTOC2 button a:hover{text-decoration:underline}.mbtTOC2 button span{font-size:15px;margin:0 10px}.mbtTOC2 li{margin:10px 0}.mbtTOC2 li a{color:#0080ff;text-decoration:none;font-size:18px}.mbtTOC2 li a:hover{text-decoration:underline}.mbtTOC2 li li{margin:4px 0}.mbtTOC2 li li a{color:#289728;font-size:15px}.mbtTOC2 ol{counter-reset:section1;list-style:none}.mbtTOC2 ol ol{counter-reset:section2}.mbtTOC2 ol ol ol{counter-reset:section3;margin:10px 0}.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}

5. In Last , Search For <data:post.body/> And Replace With Below Code.
 
How To Create Automatic Table Of Content In Blogger Post

 

 

<div id=”post-toc”> <div class=”mbtTOC2″> <button>Table of Contents <span>[<a id=”Tog” onclick=”mbtToggle2()”>hide</a>]</span></button> <div id=”mbtTOC2″></div> </div><data:post.body/><script>mbtTOC2();</script></div>

6. Save Blog Theme.
 
[If Your Theme Has More Than One <data:post.body/> Replace All With Given Code Othervise Table Of Contents Not Work Properly. ]
 
 
 

Limitations Of Blogger Automatic Table Of Content

This Automatic Table Of Content Show After Title In Blogger Post In All Blog Post’s.
 

should Use Manual TOC ?

The Benefit Of Blogger Manual Table Of Content Is That We Can Add Anywhere On Post That Is Suitable For Blogger Post. It Looks Professional Normal , Clean And Gives Better UI.
 
 
Bottom Line
Yep , if This Post Help You To Create Automatic Table Of Content In Blog Then Share This Article On Social Media To Motivate Me..

Leave a Comment