How to add the table of content in blogger | Table of Content for Blogs

We will try our best to provide you the best and easiest way in blogging. This is very useful content for bloggers, it will help you to create a table of contents for the blog on your blogging website.

Why is this Helpful?

This provides a good experience for article readers. People can use the table of contents to jump down to the parts that are more important to them.

Let us now learn how to make a table of contents for a blog, which we will make in the easiest way.

Step1: Go to “Theme”, click on the Customize Arrow, and click on the “Edit HTML” button.

Step2: Copy the given below code and paste it above the <head> Tag.

How to add <b>table of contents</b> in blogger 2021?, Table of Content for Blogs, Easy <b>table of contents</b>, How to create <b>table of contents</b> in blogger post, Add <b>table of contents</b> in blogger, blogger <b>table of contents</b> widget.

<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>

Step3: Now click anywhere inside the code and click the Ctrl+F Key.

Step4: Search ]]></b:skin> code in the search-Box.

Step5: Copy the given below code and Paste above the ]]></b:skin> code line.

.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} */

Step6: Again Press the Ctrl+F Key and Search the <data:post.body/> code.