How To Add Automatic Table Of Contents In Blogger Post

How To Add Automatic Table Of Contents In Blogger Post

How To Add Automatic Table Of Contents In Blogger Post. Please don’t forget to Like, Share, Comment and Subscribe to our Techno Vedant Channel for more videos

.

Table Of Contents Code:

Before The Head Tag / After The Closing Head Tag
</head>

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

 After The Closing CSS Tag Tag
]]></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;} 

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

ADD ON POST:

Before The Past Heding On Html Code Tad:

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

ADD THIS CODE ON THE LAST OF POST:

<script>mbtTOC();</script>