Table of contents in website blogger post 2021

Hello everyone in this post we are going to create Table of contents on blog post. So lest start

Fist go to blogger dashboard, and Click on  Theme section. now click down arrow button and Edit Html. Now Follow this steps.

Copy this code and pest before </head> Tag :

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


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

Copy this code and pest before ]]></b:skin>

.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;}




Copy this code and Replace on <data:post.body/>Tag :

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

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

On Post Codes : 

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

    </div>

<script>mbtTOC();</script>

Note: You Can Change those color if you want

Change background color #FFFFEO

Change border color #f7f0b8

Change font color #707037

Change Anchor link color #0080FF

Change the font size of anchor Links 15px

Change the font size of TOC heading text 20px

Learn More Bangla :