ब्लॉगर पोस्ट में Table of Content कैसे लगाएँ? [Aug 2023 Updated ]

ब्लॉगर के वेबसाईट में सब कुछ आपको फ्री में मिल जाता है जैसे domain name, themes लेकिन इसमे plugin लगाने की सुविधा नहीं है। 

लेकिन इसके बावजूद हम wordpress की तरह प्लगइन का इस्तेमाल कर लेते हैं वो भी फ्री में, तो इस लेख में मैं आपको Table of content plugin के बारे में बताने वाला हूँ। की किस प्रकार आप अपने ब्लॉगर के पोस्ट में Table of Content Add कर सकते हैं। 

इसके अलावा आप टेबल ऑफ कंटेन्ट के फायदे के बारे में भी जानेंगे और यह भी जानेंगे की यह आपके लेख को कितना बेनीफिट देता है जिससे गूगल सर्च इंजन में वेबसाईट को रैंक कराने में काफी मदद मिलती है। 

इसके लिए आपको केवल कुछ कोड copy और paste करने होते हैं, तो चलिए जानते हैं की blogger post mein table of content kaise lagayein?

ब्लॉगर पोस्ट में Table of Content कैसे लगते हैं?

वैसे अधिकतर वेबसाईट और यूट्यूब विडिओ में आपको जो टेबल ऑफ कंटेन्ट बताते हैं वो किसी न किसी वजह से काम नहीं करता। या तो कोड गलत हो जाता है या उसकी डिजाइन रीस्पान्सिव नहीं होती है। 

लेकिन मैं आपको जो कोड दूंगा वह 100% Working है, जिसमे आप जैसा चाहे वैसा बदलाव भी कर सकते हैं। तो चलिए उन सभी स्टेप को जानते हैं जिससे आप इस कोड को सफलता पूर्वक बिना किसी समस्या के ऐड कर पाएँ।

Note: अपने ब्लॉगर वेबसाईट के थीम में किसी भी प्रकार का बदलाव करने से पहले उसका एक बैकअप जरूर लें, ताकि थीम में कोई गड़बड़ होने पर आप पुराने थीम को दुबारा इंस्टाल कर सकें। 

Step 1: CSS

• सबसे पहले आपको नीचे वाला CSS Code कॉपी करना है फिर ब्लॉगर के Dashborad में जाना है
• वहाँ आपको थीम पर क्लिक करना है 
• उसके बाद आपको Coustomize के साइड वाले Icon पर क्लिक करना है
• अब आपको Edit HTML पर क्लिक करना है 
• आपको Ctrl+F दबा करके ]]></b:skin> को Search करना है 
• इसके बाद पूरे CSS Code को इसके ठीक ऊपर Paste कर देना है

CSS

/* TOC */
.table-of-contents{flex:auto;background: #fff; font-size: 17px; padding: 11px; box-shadow: inset -1px 1px 6px 0px #5e26cd; border-radius: 12px; margin: 8px 0 30px 0;}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}

Step 2: Java Script

• अब आपको नीचे का Java Script Code को कॉपी कर लेना है
• अब आपको Ctrl+F दबाकर </body> को Search करना है
• इसके बाद पूरा Java Script Code को इसके ठीक ऊपर Paste कर देना है। 

अब आपको Save कर देना है। 

Java Script

<script async='async'>
var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:none'>&quot;;$(&quot;article h2, article h3, article h4, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h3, article h4, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}</script>

Step 3: HTML

• अब आपको नीचे दिया हुआ HTML Code को कॉपी करना है
• Blogger Dashboard में वापस आना है
• अब आपको जिस पोस्ट में Table of Content लगाना है उसको ओपन करिए
• अब 🖍 Icon पर क्लिक करके html view पर क्लिक कीजिए 
• इसके बाद आपको सबसे पहले Heading या H2 के ठीक ऊपर HTML Code को Paste कर दीजिए।

इसके बाद पोस्ट को Update या Publish  कर दीजिए। 

HTML

<div class='toc-pro'></div>

Table of Content के क्या फायदे हैं?

टेबल ऑफ कंटेन्ट को अपने ब्लॉगर पोस्ट में इस्तेमाल करने से आपके वेबसाईट के लिए काफी फायदेमंद होता है। यह SEO के नजरिए से तो और भी जरूरी है, जिसके कारण Search Engine में ब्लॉग को जल्दी Index भी किया जाता है। 

इसके साथ ही कई सारे Snipet में पोस्ट के Table of Content Show करता है जिसके कारण ट्राफिक भी बढ़ता है। 

User को इससे बहुत लाभ होता है व लेख को पढ़ने में आसानी होती है, क्यूंकी सभी यूजर को इतना समय नहीं होता की वह पूरा लेख पढे इसीलिए वह कुछ जरूरी टॉपिक को Table Of Content द्वारा क्लिक करके पढ़ सकते हैं। इसके अलावा उनको एक Outline प्राप्त हो जाता है की लेख के अंदर वह कौन से Topic पढ़ने वाले हैं।