Home
Script

How to Add Automatic Table of Contents in Blogger Posts in 2021

Add automatic content to Blogger posts in 2021

Hi everyone, do you want to add an automatic multi-level list to your blogger post or website? This is how you add the article for you.

How to Add Automatic Table of Contents in Blogger Posts in 2021



I will try a new understanding method for you to create a table list in Blogger. Not so much. I will give you a full description of the automatic table contents. You should also improve your color.

Follow the step by step.

Step: 1


COPY And PASTE Above = </head> Tag In Your HTML Code Of Blogger 
 
<script type='text/javascript'> 
//<![CDATA[                
//*************TOC Plugin V2.0 by MyBloggerTricks.com
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>

Step: 2

2nd; CODE COPY Next Search ]]></b:skin> And Just Above It Paste The Following CSS Code:


<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
type='text/css'/>
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.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:4px 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}
*/

Finally search for <data:post.body/> and replace it with the code below:Finally search for

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

Step: 3

3rd; copy the code

It is best to copy the code to display the TOC right after your starting paragraph or before the first headline on your blog post.

To do this, switch to Blogger Editor's 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>

forth; copy the code 

copy the code and paste the code in the HTML view of your post 

<script>mbtTOC2();</script>

Note:

  • Each time you show a table in your articles, follow the third and Pth set for each post.
  • You will write the article and insert the third and fourth code in your post HTML view.
  • Content1.txt multi-level table
  • Displaying tables of multiple contents 

 

Post a Comment