If you want to create Table of Contents in Blogger like WordPress and if you do not know how it is done and how to do this in WordPress then you will get plugins somewhere that will give you Table of Contents in one click. Will add on every post but you do not find any such plugin inside blogger, you manually  Court has to be put in our team, so today we will learn in detail how to put table of content in blogger on every post 

So before starting this process I would request you to back up your theme in your storage otherwise if you delete something wrong then your team may get spoiled so let’s start  theTutorial

 So first you have to open your blogger.com

 After that you have to go to theme section

Go to Theme editor in blogger

Before moving further take your theme backup from the arrow next to Customize button as shown below

Backup theme 1
Backup theme 2

And save your backup file in your storage.

After clicking on the arrow next to the customize button, click on EDIT HTML. Now your theme code will be in front of you.

Edit HTML of your theme

I am giving you the code below which you have to copy and paste in your theme after <head> tag.

After copying the code, you have to add after <head> section the theme code.

After you paste the code and click on the Save Changes button, then your code will be successfully added to your theme. 

After that you have to go to the theme section and press Control + F,  This will open your Find and Replace tool and you have to search for

]]></b:skin>

After finding this code, add CSS code before ]]></b:skin>

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

In the next step, we have to do something similar, find

<data:post.body/>

and replace above code with <div id=”post-toc”><data:post.body/></div> this code

And save the theme. Now, all the part of theme editor is done.

 The next step is to go to your post editor of the post in which you want to add table of contents.  now go to the HTML Editor of that post. 

Post editor- blogger

 

<div class=”mbtTOC2″> <button>Contents <span>[<a onclick=”mbtToggle2()” id=”Tog”>hide</a>]</span></button> <div id=”mbtTOC2″></div> </div>

and paste the above code where you want to show table of contents.  I personally recommend you to pay QR code before first heading in your post. Example, before first <h1> / <h2> tag

And in the last step, you have to paste script below your post content in post editor

<script>mbtTOC2();</script>
Add Table of content sript in post editor

All done now update your post or publish it  and you can see in your first that table of content is visible.

 Check ones that navigation is correct in table of contents.

 If you want to change the style and color of this table of content then you  you need to have a good knowledge of CSS,  then you can edit your CSS code mentioned above  to change the colour and style of your TOC.