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.

Products I Use For Making Videos:
Mic: https://amzn.to/2sItJ8P
Tripod: https://amzn.to/2OKuBlF
Camera: https://amzn.to/2Rhfimc
Laptop: https://amzn.to/2Lis1kV
LED Tubelight: https://amzn.to/2RmEwQ2
Web Hosting Link: https://www.hostinger.in/vedant

Table Of Contents Code:

Be sure to backup the Blogger template

1) Copy and Paste above </head> tag in your HTML Code of Blogger👇🏾
<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.

2 thoughts on “Add Automatic Table Of Contents In Blogger Posts

Leave a Reply

Top