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

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

अगर आप blogging कर रहे हैं और चाहते हैं कि आपकी पोस्ट Google पर जल्दी rank हो, तो आपको अपनी पोस्ट में Table of Contents जरूर add करना चाहिए! Table of Content SEO (Search engine optimization) मे help करता है! 

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

Table of Contents एक तरह का Content Index होता है जो आपकी पोस्ट के सभी Headings (H2, H3, H4) को एक जगह list कर देता है।

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

अगर आप अपने Blog या Website में Table of Contents लगाते हैं तो आपकी Post के Google पर Rank होने के Chances बढ़ जाते हैं। WordPress में यह काम Plugin से आसान हो जाता है, लेकिन Blogger पर ToC Add करने के लिए थोड़ा Manual Setup करना पड़ता है। घबराइए मत, मैं आपको Step By sSep पूरा Process बताऊँगा।

Table of Contents SEO के लिए क्यों जरूरी है?

✅ User Experience Improve करता है – Readers आसानी से Navigate कर पाते हैं।

✅ Bounce Rate कम करता है – Visitors ज्यादा Time तक आपकी Site पर रुकते हैं।

✅ Google Featured Snippet में Help करता है – कई बार ToC search result में ही show हो जाता है।

✅ Professional Look देता है – आपकी Blog Post Attractive कर पाते है।

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

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

Table of Contents Html Code for Blogger कौन - कौन से, कहा - कहा पर Add करना होंगे। इसके लिए नीचे दिए गए Steps को Follow करे।

Step 1: Login to Blogger Dashboard

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

Step 2: Open Theme Settings

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

Step 3: Edit HTML

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

Step 4: Add Code Before </head>

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

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 5: Add Code Before ]]></b:skin>

अब ]]></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 6: Replace Post Body Code

HTML में <data:post.body/> search करें और उसे Code 3 से Replace कर दें।

3. Copy HTML Code

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

 

Step 7: Save Theme

ये तीनों Codes add करने के बाद Theme को Save करें।

Step 8: Insert ToC in Blog Post

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

4. Copy HTML Code

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

Step 9: Add Code at the End of Post

हर पोस्ट के अंत में 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 करना होगा।