How to add Automatic Table of Contents in Blogger Post

Image ( How to add Automatic Table of Contents in Blogger Post )

If you have ever searched Wikipedia you must have seen Table of Content there. Not only there, you can also see table of content in many other popular websites. Table of content actually make it easy for user to know what have described in particular topic. So, today Technical Bishnuji will help you in creating Table of Content or TOC .

 

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

Search For ]]></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;}

Search  <data:post.body/>  and replace with  <div id="post-toc"><data:post.body/></div>

Important 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> <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 Your background color #FFFFEO
• Change your border color #f7f0b8
• Change your font color #707037
• Change your Anchor link color #0080FF
• Change your font size of anchor Links 15px
• Change your font size of TOC heading text 20px

Conclusion :  Adding Table of Content to your Website can make website look More Professional than before and also it will help reader reach specific topic quickly. Thanks to all for reading this post till end if you have any doubt ask your queries in comment section.