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 wantChange Your background color #FFFFEOChange your border color #f7f0b8Change your font color #707037Change your Anchor link color #0080FFChange your font size of anchor Links 15pxChange your font size of TOC heading text 20pxConclusion : 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.
Great
ReplyDeleteAwesome post bhai jaan
ReplyDeleteYou are the best
ReplyDeleteThank you
DeleteSands Casino | Casino with SeptCasino.com
ReplyDeletePlay in your 바카라 사이트 승리바카라 browser, press + + or 샌즈 카지노 파트너 tap 메리트 카지노 쿠폰 "PLAY NOW" luckyclub.live at Sands Casino to get started! We are a provider of the 제왕 카지노 보증 best online casino games in the UK,