ब्लॉगर में विषय-सूची (Table of Contents) कैसे जोड़ें ?
स्वचालित सामग्री तालिका कैसे बनाएं, ब्लॉगर पर सामग्री तालिका कैसे जोड़ें ?
प्रस्तावना
क्या आप सीखना चाहते हैं कि अपने ब्लॉग पोस्ट के लिए ब्लॉगर पर सामग्री तालिका कैसे जोड़ें? यदि हां, तो यह लेख आपके लिए है।
यदि आप जानना चाहते हैं कि ब्लॉगर में सामग्री तालिका कैसे जोड़ें, तो इस लेख को अंत तक अवश्य पढ़ें। यह आर्टिकल आपके लिए बहुत उपयोगी होगा।
सामग्री तालिका उपयोगकर्ता को यह समझने में मदद करती है कि उस पोस्ट में कौन से विषय शामिल हैं। यदि किसी उपयोगकर्ता के पास सीमित समय है, तो वे ब्लॉगर पर सामग्री तालिका में अपने इच्छित विषय पर क्लिक कर सकते हैं और सीधे उस विशिष्ट अनुभाग पर जा सकते हैं।
यदि आप विकिपीडिया के समान अपनी पोस्ट में लंबी सामग्री लिखते हैं, तो ब्लॉगर पर सामग्री तालिका जोड़ने की सलाह दी जाती है। इससे आपके उपयोगकर्ताओं के लिए आपके ब्लॉग पोस्ट पर नेविगेट करना आसान हो जाता है।
क्या विषय-सूची SEO में मदद करेगी?
संक्षेप में, सामग्री तालिका उपयोगकर्ता अनुभव को बेहतर बनाने, खोज इंजन के लिए आपकी पोस्ट को अनुकूलित करने और Google AdSense जैसे प्लेटफार्मों के माध्यम से संभावित रूप से राजस्व बढ़ाने में महत्वपूर्ण भूमिका निभाती है।
ब्लॉगर में विषय सूची कैसे जोड़ें?
अब जब आप जान गए हैं कि सामग्री तालिका क्या है और इसे जोड़ने के क्या फायदे हैं, तो आइए मैं आपको ब्लॉगर पर सामग्री तालिका बनाने के तरीके के बारे में मार्गदर्शन करता हूँ । इस प्रक्रिया में अधिकतर HTML अनुभाग में काम करना शामिल है:
आप शायद पहले से ही जानते हैं कि वर्डप्रेस में सामग्री तालिका जोड़ने के लिए कई प्लगइन्स उपलब्ध हैं । हालाँकि, जब ब्लॉगर की बात आती है, तो सामग्री तालिका जोड़ने का सबसे प्रभावी तरीका HTML के साथ काम करना है।
यदि आप HTML में पारंगत नहीं हैं, तो बहुत अधिक चिंता करने की आवश्यकता नहीं है। मैं जिन चरणों की रूपरेखा बताने जा रहा हूं, उनका पालन करके आप आसानी से अपने ब्लॉगर ब्लॉग में सामग्री तालिका जोड़ सकते हैं।
हालाँकि, अपने ब्लॉगर टेम्पलेट का बैकअप लेना याद रखना महत्वपूर्ण है । 2024 के लिए शीर्ष7 निःशुल्क ब्लॉगर टेम्पलेट देखें । इस तरह, यदि कोई समस्या आती है, तो आप बैकअप पर वापस लौट सकते हैं और नए सिरे से शुरुआत कर सकते हैं। अब, आइए शुरू करें कि ब्लॉगर में सामग्री तालिका कैसे जोड़ें:
स्टेप 1। Blogger.com पर लॉग इन करें
इसमें आपको सबसे पहले अपने ब्लॉगर डैशबोर्ड पर जाकर “थीम” पर क्लिक करना होगा।
उसके बाद, आपको अपने टेम्पलेट के लिए "HTML संपादित करें" पर क्लिक करना होगा, जैसा कि छवि में दिखाया गया है:
चरण 2. </head> टैग खोजें
इस चरण में, अपने टेम्पलेट के संपादन HTML पर नेविगेट करने के बाद, आपको इस तरह के कुछ कोड दिखाई देंगे। आपको इन कोडों पर कहीं भी क्लिक करना होगा और फिर खोजने के लिए Ctrl+F का उपयोग करना होगा </head>। आपको </head>पीले रंग में हाइलाइट किया हुआ मिलेगा . उसके बाद, आपको नीचे दिए गए कोड को ठीक पहले पेस्ट करना होगा </head>और फिर अपने परिवर्तनों को सहेजने के लिए सेव बटन पर क्लिक करना होगा।
<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[
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
चरण 3. ]]></b:skin> कोड खोजें
इस चरण में, ]]></b:skin>जैसा कि छवि में दिखाया गया है, उसे ढूंढने के बाद, आपको उसे खोजना होगा। एक बार जब आपको ]]></b:skin>कोड मिल जाए, तो आपको नीचे दिए गए सीएसएस कोड को ठीक ऊपर पेस्ट करना होगा ]]></b:skin>।
.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ul {list-style:none;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#0080ff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:underline; }
.mbtTOC 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;}
.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
चरण 4. <data:post.body/> खोजें
इस स्टेप में आपको भी यही प्रक्रिया अपनानी होगी. सबसे पहले, आपको खोजना होगा <data:post.body/>, फिर ढूंढने के बाद <data:post.body/>, आपको इसे नीचे दिए गए कोड से बदलना होगा और इसे सेव करना होगा।
<div id="post-toc"><data:post.body/></div>
सब कुछ कर दिया!!
ब्लॉगर पोस्ट में विषय-सूची कैसे दिखाएं?
अब मैं आपको बताऊंगा कि Blogger Post में Table Of contents कैसे दिखाई देगा। इसके लिए, टेम्पलेट HTML से प्राप्त कोड को सहेजना महत्वपूर्ण है, क्योंकि आप इन कोड को अपनी पसंद के अनुसार अपने ब्लॉग पोस्ट में कहीं भी रख सकते हैं, जैसे कि हेडिंग टैग H2 से पहले या बाद में। अब नीचे दिए गए चरणों का पालन करें:
चरण 1. टीओसी बॉक्स स्थान चुनें
ब्लॉगर में सामग्री तालिका जोड़ने के लिए, पहला कदम उसका स्थान चुनना है। हालाँकि आप अपनी पसंद के आधार पर कोई भी स्थान चुन सकते हैं, लेकिन टीओसी के लिए इष्टतम स्थिति आमतौर पर <h2> टैग से ठीक पहले होती है। यह लोकेशन सबसे पहले यूजर्स का ध्यान खींचती है।
टीओसी को एकीकृत करने के लिए, इन चरणों का पालन करें:
स्थान चुनें:
अपने ब्लॉग पोस्ट के HTML संपादक में, उस स्थान का चयन करें जहाँ आप सामग्री तालिका चाहते हैं। इसे <h2> टैग के ठीक पहले रखना अक्सर एक अच्छा विकल्प होता है।
HTML दृश्य पर स्विच करें:
अपने ब्लॉगर पोस्ट एडिटर में, "HTML" या "HTML व्यू" टैब ढूंढें।
अब, आप अपने ब्लॉग पोस्ट के HTML दृश्य में चुने हुए स्थान पर सामग्री तालिका के लिए कोड जोड़ने के लिए आगे बढ़ सकते हैं।
फिर, उस कोड में कहीं भी क्लिक करें और शीर्षक टैग <h2> खोजें।
उसके बाद आपको मेरे द्वारा दिए गए कोड को निम्नलिखित तरीके से टैग के नीचे पेस्ट करना होगा:
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
चरण 2. यह कोड जोड़ें
यह चरण ब्लॉगर पर सामग्री तालिका जोड़ने का अंतिम चरण है। इस चरण में, आपको अपने ब्लॉग पोस्ट के बिल्कुल अंत में नीचे दिए गए कोड को जोड़ना होगा, जैसा कि छवि में दिखाया गया है:
<script>mbtTOC();</script>
इस स्टेप को पूरा करने के बाद आपको अपना ब्लॉग पोस्ट पब्लिश करना होगा। उसके बाद, आप परिणाम देख पाएंगे जहां आप पाएंगे कि आपकी सामग्री तालिका सफलतापूर्वक जोड़ दी गई है। अब, आपके विज़िटर अपनी पसंद के किसी भी विषय पर आसानी से नेविगेट कर सकते हैं।
Q1. सामग्री तालिका को कैसे अनुकूलित करें?
उत्तर. अधिकांश ब्लॉगर्स को यह नहीं पता होगा कि सामग्री तालिका बॉक्स में फ़ॉन्ट, पृष्ठभूमि रंग, शीर्षक इत्यादि कैसे बदला जाए। मैं आपको बताना चाहता हूं कि आप अपनी पसंद के अनुसार सामग्री तालिका को आसानी से अनुकूलित कर सकते हैं। मैंने आपको कोड "]]>" प्रदान किया है, और आपको कोड में कुछ बदलाव करने की आवश्यकता है। फिर, आप अपनी विषय-सूची को मनचाहा रूप दे सकते हैं। कोड बदलने के लिए नीचे दिए गए बिंदुओं का पालन करें:
सामग्री तालिका शीर्षक टेक्स्ट का फ़ॉन्ट आकार बदलने के लिए, इसे 20px तक संपादित करें।
सामग्री तालिका के एंकर लिंक का फ़ॉन्ट आकार बदलने के लिए, इसे 15px तक संपादित करें।
सामग्री तालिका बॉक्स का पृष्ठभूमि रंग बदलने के लिए, इसे #FFFFE0 पर संपादित करें।
बॉर्डर का रंग बदलने के लिए, इसे #EE5535 पर संपादित करें।
एंकर लिंक का रंग बदलने के लिए, इसे #0080ff पर संपादित करें।
अंत में, सामग्री तालिका शीर्षक पाठ का फ़ॉन्ट रंग बदलने के लिए, इसे #707037 पर संपादित करें।
Q2. विषय-सूची में शीर्षकों को कैसे व्यवस्थित करें?
सामग्री तालिका में शीर्षकों को व्यवस्थित करने के लिए, आपको सबसे पहले एक शोध पत्र के समान, कालानुक्रमिक क्रम में अपने पोस्ट का शीर्षक लिखना होगा। उसके बाद आपको सबटाइटल या उपशीर्षक लिखना चाहिए। फिर, आपको शीर्षकों और उपशीर्षकों को पृष्ठ क्रमांक निर्दिष्ट करने की आवश्यकता है।
Q3. स्वचालित विषय-सूची क्या है?
स्वचालित सामग्री तालिका आपको मैन्युअल परिवर्तन के बिना अपने ब्लॉग पोस्ट में सभी शीर्षकों और उपशीर्षक टैग को व्यवस्थित करने की अनुमति देती है।
Credit To This Post
इस ब्लॉग पोस्ट की पुरी क्रेडिट https://www.deepawaliseotips.com को दी जाती है। ऐसे ही और जानकारी पाने के लिए आप https://www.deepawaliseotips.com की मुलाकात ले सकते है और इस पोस्ट के बारे में अधिक जानने के के लिए इस लिंक पर क्लिक करे, https://www.deepawaliseotips.comयकीन कीजिए ये काम करता है और में खुद भी इसका उपयोग करके देखा है।
Disclaimer (चेतावनी)
हमें आशा है कि आपको ब्लॉगर में विषय-सूची के बारे में अच्छी तरह से जानकारी मिल गई होगी। इसे आप अपने दोस्तों और रिलेटिव्स के साथ भी शेयर कर सकते हैं।
शुक्रिया ।
कोई टिप्पणी नहीं