Blogger में Table of Content कैसे लगाएं? एक बार लगाओ और हर पोस्ट में अपने आप आ जाएगा। इस साइट पर आपका बहुत-बहुत स्वागत है। इस पोस्ट में हम बात करेंगे कि Blogger में TOC कैसे लगाते हैं और इससे क्या फायदा होता है।
दादाभाई नमस्कार।
कभी देखा है गूगल में कोई लंबी पोस्ट खोलते हैं तो सबसे ऊपर एक डिब्बा या box की तरह आता है और उसमें लिखा रहता है 1 यह कैसे काम करता है, 2 क्यों करता है। इसी तरह question लिखा रहता है और उसकी ऊपर click करो तो सीधा इस वाली हैडलाइन के ऊपर फटाफट पहुंच जाता है। मेरा हर पोस्ट के अंदर ये TOC वाली box लगा है आप हरबार जरूर देख सकते हो।
Table of Contents
ऐसी डिब्बे को हम TOC बोलते हैं मतलब Table of Contents / विषय सूची भी बोल सकते हैं।
आज बताता हूं दादाभाई, ब्लॉगर में यह वाला डिब्बा कैसे लगाते हैं वह भी एक रुपया खर्च नहीं होगा। दो तरीका है, दोनों बताता हूं जो आसान लगे वह कर लेना।
अगर दादाभाई तुम्हारी पोस्ट में 1000 से 2000 शब्दों की है तो यह लगाना ही पड़ेगा नहीं तो रीडर भाग जाएगा।
TOC क्या है और इसे लगाना क्यों जरूरी है?
बहुत फायदा है दादाभाई।
No 1 रीडर को मजा आएगा
मान लो तुमने 1500/2000 शब्द की पोस्ट लिखी है, "डोमेन कैसे खरीदें" अब किसी को सिर्फ बजट वाला हिस्सा पढ़ना है अगर ऊपर लिस्ट होगी तो वह सीधा वही क्लिक करके वह वाला हिस्से पर चला जाएगा पूरा post स्क्रोल नहीं करना पड़ेगा।
No 2 गूगल rank ऊपर दिखाएगा
जब रीडर को अपना जवाब जल्दी मिल जाता है तो वह पोस्ट में टिका रहता है गूगल सोचता है पोस्ट तो काम की है फिर रैंकिंग अपने आप बढ़ती है।
No 3 गूगल में छोटे-छोटे लिंक आते हैं
कभी देखा है गूगल में साइट के नीचे 2/3 लिंक एक्स्ट्रा आते हैं? वह इसी TOC की वजह से आते हैं क्लिक भी ज्यादा आते हैं। तो दादाभाई लगाना तो पड़ेगा ही।
ब्लॉगर में toc लगाने के दो रास्ते हैं दादाभाई।
तारिक 1 बिना कोडिंग के Toc कैसे बनाएं।
तरीका 1 बिना कोड वाला। जिनको कोर्ट से डर लगता है उनके लिए 5 मिनट का काम है। इसमें समय थोड़ा ज्यादा लगता है।
तारिक 2 एक बार कोड लगाओ हर पोस्ट में Auto Toc आएगा (Best तरीका)
तरीका 2 कोड वाला तरीका एक बार थीम में चिपका दो फिर हर पोस्ट में अपने आप बन जाएगा। मैं यही वाला use करता हूँ।
चलो दादा बनाता हूँ।
तारिक 1 बिना code से Toc कैसे बनाएं? यह बच्चों वाला तरीका है।
स्टेप 1 गूगल में जाओ और लिखो Table of Contents generator tool for blogger सर्च करके एक enter मार के पहले वाली साइट खोल लो।
स्टेप 2 वहां एक डिब्बा होगा उसमें अपने पोस्ट का लिंक चिपका दो और जनरेट पैर दबा दो।
स्टेप 3 5 सेकंड में वह तुम्हारे लिए कोड बना देगा उसे कोड को कॉपी कर लो।
स्टेप 4 आप ब्लॉगर में अपनी पोस्ट को html वाले बटन में खोलो सबसे ऊपर पहले पैराग्राफ से पहले वह वाला कोड चिपका दो और अपडेट कर दो। अब हो गया। इस तरीके से हार नहीं पोस्ट में वही कॉपी पेस्ट वाला ड्रामा फिर से करना पड़ेगा 100 पोस्ट है तो 100 बार करना पड़ेगा। इसलिए हम 2no तरीका मैं बनाता हूं।
तारिक 2 एक बार कोड चिपको और टेन्शन खत्म यह वाला बेस्ट तरीका है।
एक जरूरी बात, अगर आप अपने Blogger थीम में कोडिंग का कोई भी काम करते हैं तो पहले थीम का बैकअप जरूर डाउनलोड कर लें। क्योंकि थीम का एरिया बहुत ही कठिन होता है, अगर कोई गलती हो जाए तो आप बैकअप से अपने ब्लॉग को दोबारा ठीक कर सकते हैं।
दादाभाई, डरना मत। लाइन बाय लाइन बना रही हूँ।
हम Toc पोस्ट की ऊपर लगाया है आप देख सकते हो बिल्कुल उसी तरह आप ऊपर में लगा दो नीचे कोड दिया है इस कोड को कॉपी करके आप पोस्ट की html में लगा दो।
👇 copy your Code
<div class="auto-toc">
<div class="toc-header">
<span>📑 Table of Contents</span>
<button type="button" class="toc-toggle">−</button>
</div>
<div class="toc-content"></div>
</div>
स्टेप 1 थीम में जाओ।
Blogger.com खोलो बाएं तरफ थीम लिखा होगा उसे पर क्लिक करो।
स्टेप 2 edit html पर क्लिक करो थीम के पास 3 dot होगा उसे पर क्लिक करो एडिट html चुने पूरी थीम का कोड खुल जाएग।
स्टेप 3 यह वाला CSS कोड चिपकाओ ऊपर ]]></b:skin>लिख के सर्च करो। ऊपर ठीक ऊपर यह वाला कोड चिपका दो दादाभाई।
👇 copy your Code
/* Auto Table of Contents */
.auto-toc {
background: #f8f9fa;
border: 1px solid #ddd;
border-radius: 10px;
padding: 15px;
margin: 20px 0;
line-height: 1.6;
}
.toc-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.toc-toggle {
border: 0;
background: transparent;
font-size: 22px;
cursor: pointer;
padding: 0 5px;
}
.toc-content ul {
margin: 0;
padding-left: 22px;
}
.toc-content li {
margin: 6px 0;
}
.toc-content li.toc-h3 {
margin-left: 18px;
font-size: 95%;
}
.toc-content a {
color: inherit;
text-decoration: none;
}
.toc-content a:hover {
text-decoration: underline;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Mobile */
@media (max-width: 600px) {
.auto-toc {
padding: 12px;
}
.toc-header {
font-size: 18px;
}
}
यह वाला कोड आपके TOC वाले box को सुंदर बना देता है।
स्टेप 4 यह वाला JavaScript कोड चिपकाओ, अब </body > लिखकर सर्च करो उसके ठीक ऊपर यह वाला दूसरा कोड चिपका दो।
👇 copy your Code
<script>
document.addEventListener("DOMContentLoaded", function () {
var tocBoxes = document.querySelectorAll(".auto-toc");
tocBoxes.forEach(function (tocBox) {
var tocContent = tocBox.querySelector(".toc-content");
var toggleBtn = tocBox.querySelector(".toc-toggle");
/* Blogger post content */
var post = tocBox.closest(".post-body");
if (!post) {
post = document.querySelector(".post-body");
}
if (!post) return;
var headings = post.querySelectorAll("h2, h3");
if (!headings.length) {
tocBox.style.display = "none";
return;
}
var list = document.createElement("ul");
headings.forEach(function (heading, index) {
/* Create unique ID */
var id = heading.id;
if (!id) {
id = "toc-heading-" + (index + 1);
heading.id = id;
}
var li = document.createElement("li");
if (heading.tagName.toLowerCase() === "h3") {
li.className = "toc-h3";
}
var link = document.createElement("a");
link.href = "#" + id;
link.textContent = heading.textContent.trim();
li.appendChild(link);
list.appendChild(li);
});
tocContent.appendChild(list);
/* Expand / Collapse */
toggleBtn.addEventListener("click", function () {
if (tocContent.style.display === "none") {
tocContent.style.display = "block";
toggleBtn.textContent = "−";
} else {
tocContent.style.display = "none";
toggleBtn.textContent = "+";
}
});
});
});
</script>
यह वाला कोड क्या करेगा? तुम्हारी पोस्ट में जितने भी Heading मतलब h2 होगी सबको पकड़ कर ऊपर लिस्ट में डाल देगा और H3 Subheading को भी पकड़ लेगा और एक लिंग बना देगा।
स्टेप 5 save कर दो। ऊपर save का बटन होगा दबा दो आब काम खत्म हो गया दादाभाई।
आब सब से जरूरी बात सुनो दादाभाई, नहीं तो box बनेगा ही नहीं।
बहुत लोग code चिपका देते हैं, पर पोस्ट गलत लिखते हैं।
तुम गलती क्या करते हो? Normal लिखकर BLO कर देते हो उससे toc कभी नहीं बनेगा। सही तरीका यह है ब्लॉगर में लिखते टाइम ऊपर normal लिखा होता है उस पर क्लिक करो वहाॅ से Heading चुनो यह तुम्हारी में Heading (h2) होगी और Subheading (h3) छोटी वाली Heading होगी।
Blogger मैं Toc लगाने के फायदे?
Heading से toc के फायदा होगा
Subheading से रीडर को फायदा होगा
Subheading से seo में फायदा
Heading से TOC क्या है?
बस जैसे ही पब्लिक करेंगे ऊपर "Toc क्या है" यह वाला डिब्बा अपने आप आ जाएगा।
TOC कैसे लिखें?
h2>Toc क्या है?</h2>
<p>Your content here......... </p>
<h2>Blogger मैं Toc कैसे लगाएं?</h2>
<p> Your content here....... </p>
<h3> स्टेप 1: Blogger खोलो</h3>
<p>Your content here </p>
<h3>स्टेप 2: अपनी पोस्ट को Edit करो </h3>
<p>Your content here....... </p>
<h2> Toc लगाने के फायदे</h2>
<p> Your content here </p>
<h2>Conclusion>/h2>
<p>Your content here </p>
Toc लगाते समय ध्यान रखने वाली जरूरी बाते।
कुछ बात है जो ध्यान रखती है, दादाभाई।
1 कम से कम 5 Heading रखो
1/2 Heading में TOC बेकार लगता है। कोशिश करें 5 या 6 तो देने ही पड़ेगी।
2 हैडलाइन छोटी रखें
Table of content लगाने के फायदा और नुकसान भी पूरी जानकारी हिंदी में, इतना लंबा मत लिखो।
इसकी जगह लिखो Toc के फायदे। मोबाइल में छोटा अच्छा लगता है।
3 मोबाइल में चेक कर लो एक बार मोबाइल में खोल कर देख लो डिब्बा सही दिख रहा है क्या।
4 क्लिक करने पर जा नहीं रहा तो?
अगर क्लिक करने पर सही जगह पर नहीं जा रहा है, तो हो सकता है आपकी थीम में नाम अलग हो। कोड में जहाँ .post-body लिखा है, वहाँ आपकी थीम में कुछ और नाम हो सकता है। तो .post-body की जगह अपनी थीम वाला नाम डाल दीजिए, तुरंत ठीक हो जाएगा।
कुछ सवाल जवाब।
लोग अक्सर यह पूछते हैं दादाभाई।
सवाल क्या Toc से सच में SEO होता है?
Yes दादाभाई, होता है। रीडर ज्यादा देर रुकता है तो गूगल मामा रैंकिंग खुद ऊपर भेजता है।
सवाल क्या हर पोस्ट में लगाना है?
नहीं। छोटी पोस्ट 500 से 600 शब्दों की हो तो मत लगाओ 1000 या 1500 शब्द से बड़ी होगा तभी लगाओ।
सवान क्या साइट स्लो होगी?
बिल्कुल नहीं। यह वाला कोड एकदम हल्का है कुछ भी फर्क नहीं पड़ेगा।
सवाल ऊपर 'इस पोस्ट में क्या है?' लिखा है, इसे बदल सकते हैं?
हाँ, कोड में जहाँ 'इस पोस्ट में क्या है?' लिखा है, वहाँ जो भी लिखोगे वही दिखेगा। अगर 'विषय सूची' लिखना है तो वो लिख दो।
आखरी बात।
एक बात बोलूंगा दादाभाई।
आजकल किसी के पास समय नहीं है दादाभाई, सबको जवाब जल्दी चाहिए इसलिए TOC लगाना बहुत जरूरी होता है। एक बढ़िया तरीका देता हूँ, कोड वाला, एक बार चिपका दोगे तो परेशानी ही खत्म हो जाएगा। कोड देखकर शुरू में झमेला लगेगा, मुझे भी लगा था, पर एक बार कोड को लगाना तो 2 मिनट का खेल है। कोड में कुछ छूट गया हो या कोड काम ना करे तो नीचे कमेंट में बोल देना दादाभाई, मैं खुद देख लूंगा।
तो दादाभाई, यह था पूरा तरीका उम्मीद करता हूं आपको यह जानकारी समझ में आ गई होगी। मैंने अपनी तरफ से पूरा बताया है आपको आसान भाषा में समझने की।
अब आपकी बारी है, आपको यह तरीका कैसा लगा नीचे कमेंट में जरूर बताना अगर आपका कोई सवाल है तो वह भी पूछ सकते हो मैं बहुत जल्दी जवाब देने की पूरी कोशिश करूंगा।
और हाँ, अगर यह पोस्ट आपके काम की लगी हो तो अपने उन दोस्तों के साथ Whatsapp पर Facebook पर Share कर देना जीसे इसकी जरूरत है, आपका एक Share किसी की बहुत मदद कर सकता है।
फिर मिलते हैं एक नहीं पोस्ट के साथ।
धन्यवाद🙏
0 Comments
Please do not enter any span links in the comment section.