How To Add Automatic Table Of Contents In Blogger Post

by

 

 

 


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.

This video is in the Hindi language.
यह वीडियो हिंदी भाषा में है

Products I Use For Making Videos:
My Phone, Mic, Camera, Tripod, Lights & Laptop:- https://goo.gl/8Tf2ya

Table Of Contents Code:

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

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

How To Add Automatic Table Of Contents In Blogger Post Video:

Ask Question #technovedant

Blog ➤https://goo.gl/Yzmxbe
Facebook Page ➤https://goo.gl/17iVXs
Twitter ➤https://goo.gl/aOoxT2
Instagram ➤https://goo.gl/l4qfxW
Watch more videos here
➤https://goo.gl/kP3stz
Click to SUBSCRIBE to more Videos!
➤https://goo.gl/uEUwG5Paragraph

Please Like, Comment, Share and Subscribe THANK YOU!