ब्लागिन की दुनिया में हर कोई अपने अपने ब्लॉग को रैंक करने के लिए जी तोड़ मेहनत करते हैं। अच्छे से अच्छे पोस्ट लिखते हैं। हर प्रकार के तरीका अपनाते रहते है। क्योंकि google भी उसी पोस्ट को रैंक करते है जो आमतौर पर सटीक जानकारी और अच्छी तरह से संरचित ब्लॉग पोस्ट होते हैं। इसीलिए आप टेबल ऑफ कंटेंट लगा कर अपने ब्लॉग का एस इ ओ इंप्रूव कर सकते हैं और साथ ही पोस्ट टाइटल के आलावा हेडिंग, सबहेडिंग को भी रैंक करने में मदद मिलती है। आईए जानते हैं टेबल ऑफ कंटेंट क्या है?
 |
| Table of contents |
क्या आप भी Blogger में Table of Contents Add करना चाहते है?
अगर आप भी अपने ब्लॉग में टेबल ऑफ कंटेंट लगा कर एस इ ओ इंप्रूव करना चाहते हैं और साथ ही पोस्ट टाइटल के आलावा हेडिंग, सबहेडिंग को भी रैंक करने की चाहत रखते हैं। तो यह पोस्ट आपके लिए यूज फुल होने वाली है। क्योंकि इस पोस्ट में टेबल ऑफ कंटेंट से जुड़ी सभी जानकारी आपको मिलेगा। वर्डप्रेस में लोग आसानी से प्लगिन का यूज करके टेबल ऑफ कंटेंट बना लेते है। लेकीन ब्लॉगर में table of contents कैसे बनेगा?
क्या आपका भी ब्लॉग या वेबसाइट ब्लॉगर पर है table of content नही बना पा रहे हैं। तो घबराने की बात नहीं technical my friends के इस पोस्ट को पढ़ने के बाद एक Beginner भी अपने ब्लॉग पर table of contents लगा सकतें है। वर्डप्रेस में तो प्लगिन इंस्टाल करके टेबल ऑफ कंटेंट एड कर लेते है। लेकिन ब्लॉगर में एचटीएमएल कोडिंग की सहायता से ब्लॉगर भी अपने ब्लॉग में टेबल ऑफ कंटेंट एड करते है। यह कोड कैसे एड करना है इसकी जानकारी आपको इसी पोस्ट में मिलेगा स्टेप बाय स्टेप उससे पहले यह जान लेते हैं की table of contents से क्यों जरूरी है।
Table of contents क्या है और क्यों जरूरी है?
आपके ब्लॉग पर आने वाले व्यूअर्स को आपका कंटेंट पढ़ने में और समझने में आसानी होती हैं। साथ ही गूगल को भी आपके पोस्ट को सर्च रिजल्ट में दिखाने में मदद मिलती है। इससे आपके पोस्ट हेडिंग और सब हेडिंग भी रैंक कर सकतें है। ब्लॉग में इसीलिए टेबल ऑफ कंटेंट होना जरूरी है।
जब भी आप पोस्ट लिखते हैं उस में हैडलाइन यूज करते हैं हैडलाइन1, हैडलाइन2, जो भी यूज करते हैं। उस हेडलाइन को एक टेबल में लिंक कर देता है। और व्यूअर पूरे पोस्ट को संक्षिप्त में देख पाता है और उसे जिस चीज की जरूरत होती है उस हैडलाइन पर क्लिक करके डायरेक्ट वह उस पैराग्राफ पर चला जाता है जिसे हम Table of Contents कहते हैं। आइए अब जानते हैं step by step टेबल आफ कंटेंट्स Add करना सिखाता हूं।
Teble of contents का customization करें।
- अपने Blogger के Dashboard में जाएं
- उसके बाद Theme मे जाएं
- अब Edit HTML को slecte करें
- अब <Head> Section के बाद कोड एड करें
- अब दूसरा कोड ]]></b:skin> Section से पहले एड करें
- अब इस कोड को <data:post.body/> चेंज करें
- अब आप अपने पोस्ट के अंदर दुसरा हैडलाइन से पहले कोड एड करें
- अब यह कोड को आप अपने पोस्ट के लास्ट में एड करें
Step 1 – Blogger Dashboard में जाएं
सबसे पहले आपको अपने ब्लॉगर में लॉगिन करके ब्लॉगर डैशबोर्ड में जाना है।
Step 2 – Theme Option पर जाएं
अब आपको Theme Option पर जाना है जैसे की आप स्क्रीनशॉट मे देख रहे हैं।
Step 3 – Select Edit HTML
अब इसके बाद आपको Customize के बगल में Dropdown बटन पर क्लिक करना है और Edit html पर क्लिक करना है जैसे की आप स्क्रीनशॉट में देख सकते हैं।
Step 4 – अब आपको कोड एड करना है <Head> Section के बाद।
अब आपको नीचे दिया गया कोड <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>
Step 5 – अब इस ]]></b:skin> code से पहले कोड एड करें।
अब आपको ]]></b:skin> के पहले नीचे दिया गया Code को कॉपी कर Paste कर देना है और Save बटन पर क्लिक करके Code Save कर देना है।
इस ]]></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;}
Step 6 – Replace <data:post.body/> code
अब इस <data:post.body/> code को ctrl +f दावा कर सर्च करें फिर नीचे दिए गए Code से Replace कर दीजिए। यह कोड आपको एक या एक से अधिक भी हो सकता है। जिसे आपको replace करना है।
<div id="post-toc"><data:post.body/></div>
Step 7 – अब पोस्ट मे कोड एड करें
अब आपको अपने Post में Add करना है Table of Contents और जो जगह पे आपको अपना Table of Contents एड करना है वही यह आपको Code कॉपी करके पेस्ट करना है।
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
Step 8 – पोस्ट के लास्ट में कोड एड करें
अब आपको यह Code पोस्ट के Last में एड करना है। जो Code निचे दिया गया है।
<script>mbtTOC();</script>
निष्कर्ष
उम्मीद करता हूं यह पोस्ट आपको यूज फुल लगा होगा। अब आप भी आसानी से अपने ब्लॉग में table of contents एड कर सकतें हैं। technical my friend की ओर से यही कोशिश रहता है की आपको हर एक जानकारी मिले ताकि आप भी ब्लागिन की दुनियां में एक कामयाब ब्लॉगर बन सकें, ब्लॉगिन से कुछ अर्न कर सकें।
यह भी पढ़े
कोई टिप्पणी नहीं:
एक टिप्पणी भेजें
यदि आपको ये आर्टिकल उपयोगी लगा हो तो इसको Facebook और whatsup पर शेयर और कमेंट करना ना भूले।
Disclaimer : इस Technical my friend को बेहतर बनाने में सहायता करें और किसी खबर या अंश मे कोई गलती हो या सूचना / तथ्य में कोई कमी हो अथवा कोई कॉपीराइट आपत्ति हो तो वह kumarnavin.nk88@gmail.com पर सूचित करें। साथ ही साथ पूरी जानकारी तथ्य के साथ दें। जिससे आलेख को सही किया जा सके या हटाया जा सके ।