How to Add Table Of Contents in Blogger - Blog Post में Table of Contents कैसे Add करे ?

Blogger Platform में WordPress जैसी कोई भी Plugin उपलबध नहीं होती है। यदि आप Blogger Platform use कर रहे है तो आपको यह बात अच्छी तरह मालूम होगा।

ऐसे में आप लम्बे Articles में Table of Contents नहीं लगा पाते जो की आपके Visitor के user experience लिए एक बुरी बात होती है। पाठक आपके लम्बे Article के देख कर back भी हो सकते है क्यूंकि उन्हें आपके  Heading, Subheading यह सब ठीक तरह समझ में नहीं आती है। और यदि आप TOC लगाते है तो आपके Readers को एक Clarity मिलती है की post में आप किन विषयों पर चर्चा कर रहे है। इसलिए अपने पोस्ट में TOC जरूर से लगाए।

लेकिन आपको चिंता करने का केइ ज़रूरत नहीं है इस Post में  सिखाउंगा Image की तरह आप भी अपनी Post में Table of Contents केसे  Install करते हैं । बस आपको कुछ basic सी step follow करना होगा।

Table of Contents (TOC) क्या है ?

किसी भी article का Structure overview को Table of Contents कहा जाता है। Table of content  Article मैं लगाने से Reader को या पाठक को Article के अंदर किन-किन विषय पर चर्चा की गई है उसका आसानी से पता लग जाता है। Tablet of content से post में लिखी गई सारी Headline को post की Starting में देखा जाता है।

यह भी पढ़िए: Blogger में Adsense Account को Invalid Clicks से कैसे बचाएं?

Table of Contents (TOC) लगाने के क्या फायदे है ?

TOC एक ऐसी feature है जिसे आप अक्सर Wikipedia के pages पर लंबे Article के लिए आसान navigation प्रदान करने के लिए देखते हैं। Wikipedia एक Table of Contents (TOC) जोड़ना पसंद करता है क्योंकि यह readers को एक अच्छा user experience देता है और एक से दूसरे भाग में आसानी से jump करने में मदद करता है। अब बात करते है इसके खास फायदे के

  1. Table Of Contents add करने से यह आपके SEO को Improve करता है। 
  2. Google Search Engine आपके post title के अलावा heading और subheading को भी Rank करता है। 
  3. Readers को आपके Articles पढ़ने में आसान बनाता है। 
  4. इसके Structure Overview से आपके articles ज्यादा Attractive और Professional दिखते है जो कि Readers को आपके website की ओर trust को बढ़ाता है। 

Blogger Post में Table of Contents (TOC) कैसे Add करे ?

Blogger Post में Table of Contents (TOC) कैसे Add करे
Blogger पर Post में Table of Contents Add करना बहुत ही आसान है। आपको बस अपने Blogger Template में जा कर कुछ कोड को Paste करना है। आइये इस बात को step by step समझते है।

दिए गए Step को Carefully follow करेंगे तो आप सिर्फ कूछ ही मिनटों में Table Of Contents (TOC) Add करना सिख जाऊगि।

 STEP 1 

  • अपने Blogger Account को Gmail ID से Login करे
  • Theme option को Click करे
  • यहाँ से आप अपने Template का पहले Backup रख लें यदि किसी भी प्रकार का गलती होती है तो आप वापस Template को Upload कर सकते है।
  • फिर क्लिक करे 'Edit HTML' पर
  • अब इस Edit HTML Section पर कहीं भी क्लिक करे और Ctrl + F बटन press करे, आपको एक Search box दिखाई देगा। यहाँ पर आप Type करे </head> फिर Enter बटन press करें </head> tag के ठीक ऊपर निचे दिए गए Code को Copy करके् Paste कर दें।
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V3.0 by https://www.pixelnatures.in
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>

  STEP 2 

आपको दोबारा से Ctrl+F बटन दबाना है Search Box में ]]></b:skin> लिखकर Search करना है। ]]></b:skin> मिलने के बाद निचे दिए गए CSS Code को copy करे और ]]></b:skin> के ठीक ऊपर paste कर दें।
/*####TOC Plugin V3.0 by Pixelnatures.in####*/ .mbtTOC2{border:1px solid ##f7f0b8;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px; font-family:Oswald, arial;display: block;width: 80%;} .mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC2 button a {color:#0080ff; 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:#0080ff; text-decoration:none; font-size:18px;} .mbtTOC2 li a:hover {text-decoration: underline;} .mbtTOC2 li li {margin:4px 0px;} .mbtTOC2 li li a{ color:#289728; font-size:15px;} .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3;margin: 10px 0px;} .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}
  STEP 3  

आपको Ctrl+F  बटन फिर से दबाना है और Search Box में <data:post.body/> लिखकर <data:post.body/>  Find करना है और निचे दिए गए Code को copy करे और उस Code के place में इसे Replace कर दें ।
<div id="post-toc"><data:post.body/></div>

Note: यदि <data:post.body/>की Code आपको एक बार से अधिक मिलता है तो सभी जगहों पर निचे दिए गए Code को उस स्थान पर Replace करे।

Finally सभी Code ठीक तरह से Paste हो जाने के बाद Save Theme पर Click करें और Theme को सेव कर ले।

  STEP 4  

अब आप अपने कोई भी  Post Open ओपन कीजिए और हां ध्यान रखिए उसमें 1000 सेे 1500 Word है और H1, H2, H3 इस्तेमाल किया हुआ हो । अब आप पोस्ट को Compose  Mode से HTML Mode में  लाए और जहाँ भी Table Of Contents (TOC) लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy करे और उस जगहे पर paste कर दे। Most of  Bloggers Recommend करते है आपके Post के पहले Heading के ठीक ऊपर, ताकि आपके Readers Article के शुरुआत में ही जान सके इस आर्टिकल में क्या क्या लिखा है या जो लिखा है वह उसका काम का है या नहीं ।

<div class="mbtTOC2"> 
<button>Table of Contents <span>[<a 
onclick="mbtToggle2()"  id="Tog">hide</a>]
</span></button> 
<div id="mbtTOC2"></div> 
</div>

Next निचे दी गयी कोड copy करे और इसे अपने post के HTML में जाये और इसे End में paste कर दे।

<script>mbtTOC2();</script>

Conclusion

सब complete हो जाने के बाद post के Publish करे और ध्यान रहे की आपको post को html mode  में रह कर ही publish करना है।

मुझे आशा है कि आपको यह आर्टिकल पसंद आया है । अगर पसंद आया है और आप सोचते हो कि हमने आपका मदद कर पाया तो यह पोस्ट को आगे अपने दोस्तों से जरूर शेयर करें, धन्यवाद।

Debashis

Debashis is a Young Entrepreneur Blogger having Good Technical skills, He also an Experienced Article Writer. He likes to Share Knowledge and Experience with People. facebook whatsapp telegram instagram

3 Comments

To be published, comments must be reviewed by the administrator.

  1. Sir, can you plz tell how to implement table of content in Litespot template just like you ...........

    ReplyDelete
    Replies
    1. Yes! Simply Add this code where you want to show TOC in article.

      {tocify} $title={Table of Contents}

      In blod mode

      Delete
Previous Post Next Post