Responsive Autometic Table of Content in Blogger

Hello दोस्तों कैसे है आप सब उम्मीद है अच्छे ही होंगे आज के इस पोस्ट में हम बात करने वाले है Responsive Autometic Table of Content in Blogger के बारे में इस पोस्ट में हम आपके सरे डाउट क्लियर करने की कोशिश करेंगे.

बस आप इस पोस्ट को धेयान से पढते जाये जिससे आपके सारे सवालों के जवाब हम दे सके तो ज्यादा टाइम वेस्ट न करते हुवे शुरू करते है आज का यह टॉपिक.

cht-toc

What is Table of Content

Table of Content क्या है अगर ये सवाल आपके भी मन में है तो टेंशन न लें इसका जवाब हम आपको देते है. जब हम कोई भी पोस्ट लिखते है जिसकी लम्बाई ज्यादा होती है मतलब टेक्स्ट की संख्या जी हा हम जितने जयादा शब्द के पोस्ट लिखते है उतना ही ज्यादा पोस्ट की लम्बाई होती है तो ऐसे में किसी को भी उसे स्क्रॉल डाउन करके नीचे तक जाने में बहुत जायदा टाइम लगेगा तो यहाँ पर अगर आपने पोस्ट में Table of Content ऐड किया है तो जो रीडर होगा वो आसानी से उस जगह पहुँच जायेगा जहाँ जहाँ Table of Content राइटर ने इस्तेमाल किया है और इसे Excel, Blogger, Wordpress, Websites, etc, में इस्तेमाल कर सकते है. इस पोस्ट में हम ब्लॉगर में कैसे ऐड करते है इसके बारे में जानेंगे.

Responsive Autometic Table of Content for Blogger

यह एक बेस्ट Responsive Autometic Table of Content आपके ब्लॉगर ब्लॉग पोस्ट के लिए तो बिना समय बर्बाद किए चलिए शुरू करते हैं

Step-1

Code-A

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='https://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>

1. Code-A ko copy karle
2. अपने ब्लॉगर के Dashboard में जाकर थीम के Edit HTML में जाये
3. CTRL+F दबाकर </head> Search करे और इसके ऊपर कोड पेस्ट करदे

Info: अभी थीम को सेव न करे इसे ऐसे ही रहने दे और भी कोड है उसे ऐड करने के बाद सेव करेंगे आप यह काम अलग-अलग टैब में आसानी से कर सकते है.

Step-2

Code-B

.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;}

1. Code-B कोड को कॉपी करे
2. अपने ब्लॉगर के Dashboard में जाकर थीम के Edit HTML में जाये
3. CTRL+F दबाकर ]]></b:skin> Search करे और इसके ऊपर कोड पेस्ट करदे

Step-3

Code-C

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

1. Code-C ko copy kare
2. अपने ब्लॉगर के Dashboard में जाकर थीम के Edit HTML में जाये
3. CTRL+F दबाकर <data:post.body/> Search करे और यह कोड आपके टेम्पलेट में जितने बार आ रहे है उन सभी को code-c से Replace करदे किसी में 1 बार किसी-किसी में 3 या 4 बार आते है ये कोड आप धेयान से देखले
4. और फाइनल स्टेप थीम को Save करदे

Info: ये जितने भी कोड ऊपर बताये है Code-A, B,C आपको अपने टेम्पलेट में एक बार ऐड करना है
Note: और जो निचे का कोड है Code-D, और E, आपको अपने सभी पोस्ट में ऐड करना है

Step-4

Code-D

<div class="mbtTOC">
 <button onclick="mbtToggle()">Table Of Contents</button> 
 <ul id="mbtTOC"></ul>
</div>

Code-D आपके जितने भी पोस्ट है उसके हटम्ल में जाकर आप जो पहले हेडिंग दिए है वह ऐड करे.

Code-E

<script>mbtTOC();</script>

Code-E आपके पोस्ट के सबसे नीचे </div> के आगे ऐड करे

पोस्ट रेडी होने के बाद प्रीव्यू Preview करके देखले एंड पब्लिश करदे

Note: पोस्ट लिखते करते समय रखें इन बातों का ध्यान

• टाइटल को Table of Content में दिखाने के लिए उसे टाइटल को टेबल ऑफ़ कंटेंट में शो करने के लिए उसेHeading Tag देना ज़रूरी है नहीं तो ये ट्रिक वर्क नहीं करेगी
• किसी भी Heading Title के आगे Number, या Symbol, न लिखें

आप सीधा सा उदाहरण मेरे इस पोस्ट का ही ले सकते है कैसे लिखे पर कॉपी न करे शब्द नहीं तो Copyright आ सकते है आप अपने स्टाइल में लिखे है दूसरे जगह से आईडिया ले सकते है लेकिन कॉपी न करे.

इनके Color को चेंज कर सकते है

• Change background color #FFFFEO
• Change border color #f7f0b8
• Change font color #707037
• Change Anchor link color #0080ff
• Change anchor font's font size to 15px
• Change font size to 20px for TOC title text

Code-B में जो कोड दिया हुवा है उसे Costomize करके कलर को चेंज करना चाहते है तो इस कोड को खोज के अपने पसंद का कलर कोड डाल सकते है जिससे उसकी लुक चेंज हो जाएगी.

Table of Content इस्तेमाल करने के फायदे

1. वेबसाइट में जितने भी रीडर आते है उन्हें पोस्ट पढ़ने में आसानी होती है वो Table of Content देखकर यह समझ जायेगा के पोस्ट में क्या-क्या कवर किया गया है जिससे वो जहा से पढ़ना चाहे वह से शुरू कर सकेगा.
2. यूजर फ्रेंडली जी हा जो वेबसाइट यूजर फ्रेंडली होता है उसके यूजर का ट्रस्ट बना रहता है और वह बार-बार वह विजिट करता है और Google भी ऐसे आर्टिकल को पसंद करता है.
3. Seo friendly होता है जिससे गूगल में रैंक करने में आसानी होती है.

Final Word

तो फ्रेंड्स ये थी इस टॉपिक से रिलेटेड कुछ जानकारी उम्मीद है आपको हमारी यह पोस्ट Responsive Autometic Table of Content in Blogger ज़रूर पसंद आया होगा. अगर इस पोस्ट से सम्बंधित किसी भी तरह की जानकारी आपके पास हो जो हमसे कवर न हुवे हो या फिर आपका कोई सवाल हो जो आप मुझसे करना चाहते है तो निचे कमेंट सेक्शन में अपने वर्ड टाइप ज़रूर करे और साथ ही इस पोस्ट को अपने फ्रेंड्स और सोशल साइट पे शेयर करना न भूले. अब मिलते है अगली पोस्ट में किसी और टॉपिक के साथ तब तक के लिए Bye.