How To Add Automatic Table Of Contents In Blogger Post in Urdu and Hindi

SHARE WITH YOUR FRIENDS

How To Add Automatic Table Of Contents In Blogger Post. 

Please don’t forget to Like, Share, Comment and Subscribe to our Technical Arshad Youtube Channel for more videos.

This video is in the Urdu and Hindi language.

How To Add Automatic Table Of Contents In Blogger Post – how to add automatic table of contents in google website blogger post in hindi 2019. in this video i am telling about how to add a table in blogger post in just 2 minutes its easy method to add table in blogger and website ..

how to add table of content in blogger in Urdu and Hindi.

Table Of Contents Code:

The Below Codes Will be Paste in Theme ……. Edit Html Option 

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


The Below Codes Will be Paste in Post....... Edit Html Option 
<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

 

Watch Video

ASW ZONE

Arshad Aslam, Sajid Ali and Wajid Ali are the Chief SEO experts and the founder of "ASW ZONE". They have a very Interest in all Technology Topics, Online Earning Topics, Android Studio Topics and many more other topics whatsoever. Their Passion, Dedication and Quick Decision making ability make their stand apart form others. Thanks and Regards

Leave a Reply

Your email address will not be published. Required fields are marked *