How to add Table Of Content in Blogger Post?

Hello brothers and sisters, how are you all, hope you all will be great, friends today I am going to tell you how you can add Table of Content to your Blogger website. Friends, we will need some HTML codes to add Table of Content to our website. So as I tell you, all you have to do is the baisa.

So friends, first of all, you have to open the HTML code of your website and then you have to press ctrl + f, after that you have to type in the search box </head> and then the code I have given to you is given to you </head> > Paste it above the code.

How to Add Table Of Content?

Read More! 

• Blog kya hai aur Professional Blogger Kaise bane?
• How to create an Url Shortener Website on Blogger?
• How To Set Download Timer For Blogger or Website?

Table Of Contents Code:

<script type='text/javascript'>              

//<![CDATA[                      

function mbtTOC() {var mbtTOC=i=headlength=gethead=0;           
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)           

{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

After that, you have to press ctrl + f again and this time you have to type the code given below in the search box

]]></b:skin>

After searching this code, you have to paste the below-given code on it

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}

.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}

.mbtTOC ul {list-style:none;}

.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}

.mbtTOC a{color:#0080ff;text-decoration:none;}

.mbtTOC a:hover{text-decoration:underline; }

.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}

.mbtTOC button:after{content: "f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

After pasting the above code, you have to paste another code again in your theme, now you have to search the code below in your Theme's HTML code and paste another code in its place.

<data:post.body/>

Note: If you will find more than one <data: post. body /> so replace all by this code below.

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

After pasting these three codes in your Blogger theme, and you have to click on the button of Save Theme.

Add Table Of Contents In Blogger Post


Now friends, in any post you want to add Table of Content, you have to go to the HTML code of that post and after that, you have to paste the code given above the first heading of your post-Ex. </br> Code <br>

<div class="mbtTOC"> 
<button onclick="mbtToggle()">Table Of Contents</button> 
<ul id="mbtTOC"></ul>

</div>

Now, friends, you have to paste another code at the very bottom of your post which is given below

<script>mbtTOC();</script>

My Opinion

Now, friends, your work is done, now if you check your post, you will get the Table of Content in your website. Whoever has made his Apni Heading, you will see it in your post.

I hope You must have liked this article written by me, you must share it with your friends.