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.

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!

Summary
Review Date
Reviewed Item
How To Add Automatic Table Of Contents In Blogger Post
Author Rating
51star1star1star1star1star

11 thoughts on “How To Add Automatic Table Of Contents In Blogger Post”

  1. Hello vedant sir nice artical useful for every bloggers.
    But sir mere blog par sirf table of contents box hi show ho raha hai headings show nahi ho raha maine kafi baar html codes dhayan se copy paste kiya but sir every time box hi show ho raha hai.
    if you have any idea please tall me…

    Reply

Leave a Comment