How to add Table of content in blogger new deshbord

How to add Table of content in blogger new deshbord


How to add table of content in blogger new deshbord

Blogger mein table of content visitors ko ek sampoorn post padhane ke bajaay sateek bindu par jaane mein madad karatee hai jo aapake visitors ke samay ke saath-saath aapake article ko peshevar lag sakata hai. phir bloggers ke lie table of content kaise banaee jae.



Google apagred kar raha hai aur bloggers ko upgrade karane ka samay bhee hai. Wordpress kee tulana mein bloggers ko bahut kamiyan hain. Wordpress mein, aap vibhinn plagins ka upayog kar sakate hain lekin blogger par nahin.



Blogger mein Table Of Contents kaise add karein? 


Table Of Contents banane ke lie aapako mere article mein Table Of Contents ke phayade aur lecture ke baare mein mere charanon aur kuchh vyakhyan ka palan karane kee aavashyakata hai.


blogger par Table Of Contents ka Importance.


  • Helpful for your visitors.
  • Professional look.
  • Google rich content. [ Helps on ranking ]


Table Of Contents ka disadvantage


  • automatic method aapake loding samay ko kam kar sakatee hai.
  • automatic method AMP sites par viphal ho jaegee.
  • manual method thoda samay lene valee hai.
  • Visitors ke vyast samay mein nukasan ho sakata hai.


aaj main aapake saath blogger mein table of contents banane ke lie do alag-alag methods ko aasanee se share karane ja raha hoon.



blogger par Table Of Contents banane ke 2 Methods


1.Automatic Method

2.Manual Method


Automatic Method blogger par Table Of Contents banane ke lie.


jaisa ki automatic naam se hai, yahan aapako apanee content ke roop mein h2 ya h3 ya h4 chunane kee aavashyakata hai aur default roop se, yah h2 par set hai. isaka matalab hai ki aap h2 par jo bhee dalate hain vah sheershak svachalit roop se table of content ke roop mein set ho jata hai.


default roop se, design aakarshak nahin hai, lekin mainne apanee pasand se sanshodhit kiya hai. aap khud ko apana bana sakate hain.


blogger par table of contents banane ke lie automatic method ka labh


  • yah automatic hai ki sabhee h2 Table of content mein svachalit ho jate hain.
  • blogger ke lie automatic table of content manual method kee tulana mein bahut samay bachatee hai.


blogger par table of contents banane ke lie automatic method ka nukasan


Automatic table of content javascript ka upayog karen jo aapake page kee loading speed ko prabhavit karega.

h3 kee tarah sabatop ko shaamil nahin kiya ja sakata.

yah AMP template par upayog nahin kar sakata hai.


Manual Method blogger par table of content banane ke lie


manual method par, aap manual roop se ek table of content bana sakate hain isaka matalab hai ki aap apanee table of content mein kuchh bhee shamil kar sakate hain aur sath hee sath aap subtopic bhee shamil kar sakate hain.


Manual Method of labh blogger par table of content banane ke lie


javascript kee koee zaroorat nahin hai isaka matalab hai ki aap apane page ko pooree tarah se load karane ke lie 1.2 se adhik bachate hain.

aap AMP Template par bhee upayog kar sakate hain.

isamen aapakee Table Of Content mein subtopics bhee shamil ho sakate hain.



Blogger par table of content banane ke lie manual method ka nukasan


  • prakriya ke roop mein bahut samay kee jaroorat manual hai.
  • yah kuchh html kaushal kee jaroorat hai.


yadi aapake paas samay nahin hai to main automatic method kee salah deta hoon lekin yadi aapake paas hai to manual method ka upayog karana sabase achchha hoga.


aaie blogger par table of content banane ke lie automatic method se shuroo karen


Google blogger mein aromatic table of content ko kaise joda jae, isakee Step-Wise Process


pratyek charan ka palan karen.


Table of content video tutorial


Step1:

Apni blogger dashboard par jaye or apni theme ko download kar lijiye. 


Note: apki mobile phone me QuickEdit app install hona jaruri hai. 

Step2:

How to add table of content in blogger new deshbord


πŸ‘‰ </head> search kare or </head> ke upar niche diye gaye code ko pest karde. 

πŸ‘‡

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


Step3:


How to add table of content in blogger new deshbord

πŸ‘‰  ]]></b:skin>  

es code ko ap search karenge or es code ke upar niche diye gay code ko pest karenge πŸ‘‡


.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;}


Step4:

How to add table of content in blogger new deshbord

  es code ko Search karein

 πŸ‘‰ <data:Post.body/> "(can be Ea 1bar ya pher 2,3 bar) Or es code se replace karengeπŸ‘‡

 <div id="post-toc"><data:post.body/></div>  


Ab jitna bhi code hain all select karke copy karenge or blogger ke deshbord me jake theme section me edit html me jake pora select karke Delight karke boh jo code copy kiya tha ose peste karke save theme karenge. 


Step5 :

How to add table of content in blogger new deshbord

Blogger ke post me jayenge Or Heding, Sub heading create karenge jis heading ke upar table of content show karane chahate hain ose HTML me jake dhondenge or iske uper <bring /> πŸ‘† <h2 ke bich me ea code ko peste karengeπŸ‘‡


  <div class="mbtTOC"> 

    <button onclick="mbtToggle()">Table Of Contents</button> 

    <ul id="mbtTOC"></ul> 


    </div>


Step6 :

How to add table of content in blogger new deshbord

post ke HTML me ekdam last me jaha pe post khatam hota hai vaha pe es code ko pest karenge πŸ‘‡ 


 <script>mbtTOC();</script>


post ko update karke dekhenge table of content show kar raha hai. 



Related Posts