Blogger Blog में Table of Contents कैसे Add करें | Step by Step Guide 2026

क्या आप जानते हैं कि Blogger Blog या Website पर Table of Contents (ToC) add करना क्यों जरूरी है?

अगर आप Blogging कर रहे हैं और अपनी लंबी Blog Posts को Readers के लिए आसान और व्यवस्थित बनाना चाहते हैं, तो आप अपनी Post में Table of Contents (TOC) add कर सकते हैं। इससे Readers को Article के अलग-अलग Sections को आसानी से समझने और अपनी जरूरत के Section तक जल्दी पहुंचने में मदद मिलती है। 

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

Table of Contents (TOC) एक Content Index होता है जो आपकी Post के Important Headings और Sections को एक जगह List करता है। इससे Readers को Article का Structure समझने और किसी खास Section तक जल्दी पहुंचने में मदद मिलती है।

👉 इससे आपके Readers को पूरा Article पढ़ने में आसानी होती है और वे जल्दी-से-जल्दी अपनी जरूरत के Section पर पहुंच पाते है।

Table of Contents आपकी Post की readability और navigation को बेहतर बनाने में मदद कर सकता है। हालांकि केवल TOC add करने से Google में Ranking की कोई Guarantee नहीं होती। 

WordPress में Table of Contents के लिए कई Plugins उपलब्ध हैं, जबकि Blogger में आप HTML, CSS और JavaScript की मदद से TOC Add कर सकते हैं। इस Article में हम Blogger Blog में TOC Add करने का पूरा तरीका Step by Step देखेंगे। घबराइए मत, नीचे हम पूरा Process Step By Step देखेंगे।

Table of Contents Add करने के क्या फायदे हैं?

✅ User Experience Improve करता है – Readers Article के अलग-अलग Sections को आसानी से Navigate कर सकते हैं।

✅ Long Articles को Organize करता है – बड़े Article की Structure समझना आसान हो जाता है।

✅ Relevant Section तक जल्दी पहुंचने में मदद करता है – Reader सीधे अपनी जरूरत के Topic पर जा सकता है।

✅ Article को व्यवस्थित Look देता है – Long Blog Posts ज्यादा structured दिखाई देती हैं।

Blogger Blog पर Table of Contents कैसे Add करें?

अब सबसे Important बात, Blogger Blog या Website पर ToC add करने के लिए आपको कुछ HTML + CSS कोड Add करना होगा।

Blogger में Table of Contents Add करने के लिए आपको कुछ HTML, CSS और JavaScript Code अपनी Theme में Add करने होंगे। कौन-सा Code कहाँ Add करना है, इसकी पूरी जानकारी नीचे Step By Step दी गई है।

 

Step 1: Theme का Backup लें

Blogger Theme के HTML में कोई भी बदलाव करने से पहले अपनी Current Theme का Backup जरूर ले लें। अगर Code Add करने के बाद कोई समस्या आती है, तो आप Backup की मदद से अपनी पुरानी Theme Restore कर सकते हैं।

Step 2: Blogger में Login करें

सबसे पहले अपने Blogger Blog/Website के Dashboard में Login करें।

Step 3: Theme Settings में जाएँ

अब आपको Theme Option पर क्लिक करना है।

Step 4: Edit HTML पर Click करें

Theme में जाकर Edit HTML पर क्लिक करें।

Important: Code Add करने से पहले

Blogger Theme के HTML में बदलाव करने से पहले Theme का Backup जरूर लें। किसी दूसरे Theme में यह Code बिल्कुल उसी तरह काम करे, यह जरूरी नहीं है। इसलिए Code Add करने के बाद अपनी Blog Post को Desktop और Mobile दोनों पर Check करें।

 

Step 5: </head> से पहले Code Add करें

HTML में </head> को search करें और उसके ऊपर Code 1 paste करें।

ध्यान रखें: Code को सही जगह पर ही paste करें और Theme में बदलाव करने से पहले Backup जरूर रखें।

1. Copy HTML Code

<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[ //*************Table of Content (TOC) plugin by techonly99.xyz function avsTOC() {var avsTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}} //]]> </script>

Step 6: ]]></b:skin> से पहले Code Add करें

]]></b:skin> को Search करें और उसके ठीक ऊपर Code 2 Paste करें।

2. Copy HTML Code

.avsTOC{border:1px solid #999999; box-shadow:0px 0px 0 #EDE396; background-color:#f3f3f3; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .avsTOC ol,.avsTOC ul {margin:0;padding:0;} .avsTOC ul {list-style:none;} .avsTOC ol li,.avsTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .avsTOC a{color:#6fa8dc;text-decoration:none;} .avsTOC a:hover{text-decoration:underline; } .avsTOC 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;} .avsTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Step 7: Post Body Code को Replace करें

HTML में <data:post.body/> Search करें। Blogger Theme के अनुसार यह Code एक से ज्यादा जगह दिखाई दे सकता है, इसलिए सही Post Body Section को identify करके ही इसमें बदलाव करें। इसके बाद दिए गए Code 3 के अनुसार इसे Replace करें।

3. Copy HTML Code

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

 

Step 8: Theme को Save करें

Code 1, Code 2 और Code 3 को सही जगह Add करने के बाद Save पर क्लिक करें। इसके बाद अपनी किसी Test Post को Open करके Check करें कि TOC सही तरह से काम कर रहा है या नहीं।

 

Step 9: Blog Post में Table of Contents Add करें

अब अपने हर Post/Article में जिस जगह पर Table of Contents Show करवाना चाहते हैं, वहाँ Code 4 paste करें।

Tip: TOC को सामान्यतः Article के Introduction के बाद और Main Content शुरू होने से पहले रखना Readers के लिए convenient रहता है।

4. Copy HTML Code

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

Step 10: Post के End में Code Add करें

हर पोस्ट के अंत में Code 5 paste करें।

5. Copy HTML Code

<script>avsTOC();</script></div>

⚡ Important Note:

Code 1, 2 और 3 सिर्फ एक बार Theme में Add करना है।

Code 4 और 5 आपको हर Blog Post/Article में Add करना होगा।

Note: अगर आप बाद में Theme Change करते हैं, तो Code 1, 2 और 3 को नई Theme में दोबारा Add करना पड़ सकता है।

Conclusion

इस तरह आप Blogger Blog में Table of Contents (TOC) Add कर सकते हैं। TOC खासकर Long Articles के लिए useful होता है क्योंकि इससे Readers को Article के अलग-अलग Sections तक आसानी से पहुंचने में मदद मिलती है।

Theme में Code Add करने से पहले Backup जरूर लें और Code Add करने के बाद अपनी Posts को Desktop और Mobile दोनों पर Check करें।