Blogger में Table Content कैसे Add करें ?

Technical Ganesh
Technical Ganesh
May 04, 2021
2

Hello Friends Technical Ganesh में आपका स्वागत है मेरा नाम है गणेश कुमार इस Post में हम आपको Blogger में Table Content कैसे Add करें ? के बारे में हिंदी में बताएँगे 


Friends जब आप Wikipedia जैसी बड़ी Website पर जाते है आपको Wikipedia के Article में आपको एक Table देखने को मिलती है और उस Table में उस Article के Imported Points को Add किया जाता है और जब आप उस Table में से किसी भी Point पर Click करते है तो आप Direct उसी Point पर पहंच जाते है 



अगर आपका Blog Wordpress पर है तो आप इस Table Of Content को बड़ी आसानी Plugin को Install करके Add कर सकते है लेकिन Table Of Content को Blogger में Add करने के लिए आपको एक Code की मदद से Add कर सकते है हम आपको इस Post में इसी के बारे में बताने वाले है 

Blogger में Table Content कैसे Add करें ?

  1. सबसे पहले आपको अपने Blogger के Dashboard में Login होना है 
  2. अब आपको Left Side में Theme के Option पर Click करके Arrow Button पर Click करके अपनी Theme का BackUp ले लेना है 
  3. इसके बाद आपको Edit HTML पर Click करके <head> Tag के नीचे नीचे दिए गये Code को Paste करके Save कर देना है                                                                                          
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//*************TOC Plugin V2.0 
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
//]]> 
</script>
  1. इसके बाद आपको नीचे दिए गये Code को Copy करके अपने Edit HTML में Search करना है 
]]></b:skin>

2.आपको इस Code से के ऊपर नीचे दिए Code को Paste करके Save कर देना है 

 .mbtTOC2{ border:5px solid #0008FC ; border-radius: 10px 50px 10px 50px; box-shadow:5px 5px 5px 5px grey; border-style:dashed; background-color:#ACDEFB; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:Oswald, arial; display: block;width: 70%; } .mbtTOC2 button{ background:#ACDEFB; font-family:oswald, arial; font-size:22px; position:relative; outline:none; border:none; color:#2E2E2E; padding:0 0 0 15px; } .mbtTOC2 button a { color:#FF0313; padding:0px 2px; cursor:pointer; } .mbtTOC2 button a:hover{ text-decoration:underline; } .mbtTOC2 button span { font-size:15px; margin:0px 10px; } .mbtTOC2 li{margin:10px 0; } .mbtTOC2 li a { color:#EA1414; text-decoration:none; font-size:18px; text-transform:capitalize; } .mbtTOC2 li a:hover { text-decoration: underline; } .mbtTOC2 li li {margin:14px 0px;} .mbtTOC2 li li a{ color:#040404; font-size:15px; } .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3} .mbtTOC2 ol ol ol ol{counter-reset:section4} .mbtTOC2 ol ol ol ol ol{counter-reset:section5} .mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px} .mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px} .mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3} .mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4} .mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5} /* .point2 {list-style-type:lower-alpha} .point3 {list-style-type:lower-roman} .point4 {list-style-type:disc} */
  1. अब आपको नीचे दिए दिए गए Code को Edit HTML में Search करना है 
<data:post.body/>

  1. इसके बाद आपको ऊपर दिए गए Code की जगह आपको नीचे दिए गए Code को डाल देना देना है और Save कर देना है ये Code आपको अपनी Theme में एक से ज्यादा बार देखने को मिलेगा आपको सभी सभी जगह Code को बदल देना है 
<div id="post-toc"><data:post.body/></div>

  1. इसके बाद आपको नीचे दिए दिए गए Code को Copy करना है और अपनी Post में आना है 
  2. आपको जिस Post में Table Of Content को Add करना है उसको Open करें 
  3. इसके बाद आपको अपनी Post HTML View में करना है और अपनी पहली Heading से ऊपर नीचे दिए गए Code को Paste कर देना है 
  4. अब आपको नीचे दिए गए Code को Copy करना है और Post को HTML View में करने के बाद इस Code को Post के सबसे Last में Paste कर देना है 
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>

Note :- 

जब भी आप New Post लिखेंगे तो जिस जगह आपको अपनी Post में Table Of Content Add करना है उस जगह आपको ऊपर दिए गए Code को हर एक Post में Add करना होगा 



Conclusion :- 

इस Post में हमने आपको Blogger में Table Content कैसे Add करें ?  के बारे में हिंदी में बताया है आप अपने Blogger के Website में कुछ आसान से Steps को Follow करके Blogger की Website मेंTable Of Content को Add कर सकते है 

उम्मीद है कि Blogger में Table Content कैसे Add करें ? की जानकारी आपको अच्छी लगी होगाी,आप हमारे इस पोस्ट को Social Media पर शेयर करके हमारी टीम का मनोबल बढ़ा सकते है ताकि इसी तरह हम आपके लिए और भी नई नई जानकारियां आपके लिए हिंदी में लिख सके। यदि आपका कोई सवाल हो तो आप बेझिझक नीचे कमेंट बॉक्स में पूछ सकते है।