ब्लॉगर पोस्ट में “Table of Contents” कैसे Add करे ?

 

Table of Contents क्या हैं

क्या आप अपना blogger post में Table of contents  को जोड़ना चाहते है , और आपके पोस्ट को readers के लिए easy बनाना चाहते है तो आप सही जगा पे आये है। आज की इस पोस्ट में , आपको  Table of contents  को अपने पोस्ट में कैसे जोड़ना है इसकी बारेमे मेंने इस पोस्ट में उल्लेख किया हुआ हुं। ये जो Table of contents है ये wordpress में आप Easy Table Of Contents Plugin के सहायता से जोड़ सकते है लेकिन जब बात आती है blogger की तो  इसमें आपको coding की जरुरत होती है ,जब की नए blogger's को coding आता एही। 

लेकिन आप चिंता ना करे क्यों की इस पोस्ट में मेने Table of contentsको कैसे अपने ब्लॉगर के पोस्ट में लगाएंगे और किस तरह लगना है step by step मेने सब कुछ बताया है। इस पोस्ट को पढ़ने के बाद एक Beginner Blogger भी अपने पोस्ट में ये  Table of contents लगा पायेगा। और ये सभी laptop और mobile दोनों में सही से दिखेगा। सभी device में ये सही से काम करेगा।

 कुछ ऐसे भी youtubers और bloggers होते है जो अपने viewers को सही से guid नहीं करते जिसके द्वारा उन्हें सही से ज्ञान नहीं मिल पाता। और वो जो Table of contents  का code देते है वो सही से काम नहीं करता और

कुछ ही heading show करता है। जिस से नई blogger's को इस समस्या से दिक्कत आता है। लेकिन इस पोस्ट के माध्यम से आप अपने blogger post  में Table of contentsको आसानी से जोड़ सकते है।

Table of Contents क्या हैं?

Table of contents क्या है - ये जो Table of contents है ये आपके पोस्ट में आपने जितने भी heading दिए होंगे उन सभी को ये एक box के अंदर आपके पोस्ट के पहली पेज में ही लिंक के माध्यम से दिखा देता है। और जब कोई उस ब्लॉग को पढ़ने आता  है और उसे जो Topic चाहिए उस Topic को वो उस Table of contents में  जाके क्लिक करेगा तो वो सीधे उसी Topic में पहंच जाएगा। तो ये है Table of contents का काम। 

Table of contents अगर आपने blogger post में जोड़ दिए होंगे  तो आपका पोस्ट को User को समझ ने  में आसानी होती  है और User को access करने में भी आसानी होती है , Table of contents जोड़ने से google आपके पोस्ट के वारे में भी समझ आती है और इसके साथ google आपके post को सर्च रिजल्ट में अच्छे से दिखा पाता है। 

Table of contents को पोस्ट में जोड़ने से google आपके पोस्ट के paragraph को आसानी से रैंक करता है और इसके मद्दत से आपके पोस्ट में भी rank का improvement  मिलता  है और google के SEO के हिसाब से blogger post में  Table of contents जोड़ना एक जरूरी बात बन जाता है। 

Blogger में “Table of Contents” कैसे Add करे

दोस्तों आप सब जान चुके है की Table of contents क्या है , अब में बताने वाला हु की इसेआप अपने blogger spot में कैसे add करेंगे। तो आगे में step by step बताऊंगा की html code को कहा कैसे और किस तरह लगाना है। 

Blogger Dashboard में जाये

अपने blogger account को blogspot में login करके dashboard पे जाए। 

Theme Option पर जाये

इसके बाद आपको theme वाले section पे चले आना है।

 Select Edit HTML 

उसके बाद आपको Customize के बगल में Dropdown बटन पर क्लिक करके  Edit html  पर क्लिक करदेना  है।उसके बाद आप सीधा coding के section में आ जायेंगे। 

Add Code Between </Head> Section

अब आपको  ( CTRL+F  ) Press करके  </Head>  tag को सर्च  करके निचे दिए गए code को  इस </Head> tag के ऊपर past कर देना है ।

code below -

<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>

Add Code Above ]]></b:skin> Section

अब आपको   ]]></b:skin>  के ऊपर नीचे दिया गया Code को  Paste कर देना है,और  Save बटन पर क्लिक करके Code Save कर देना है ।

code below -

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

Replace <data:post.body/> code

<data:post.body/> code को find करके निचे दिए गये code को इस code के साथ replace कर देना है और जितनी भी बार ये  code आपके html box में होगा उतनीबार आपको निचे दिये गये code के साथ replace कर देना है। 

code below -

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

Code को Post में add करे 

अभी आपको पोस्ट में जाना है और अब आप अपने जिसभी heading के ऊपर ये Table of Contents को रखना चाहते है बेहि पे निचे दिए गए code को past कर देना है। यानि अपने पोस्ट के अंदर जो heading है उसीके ऊपर आपको ये code को past कर देना है।

code below -

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

code को post के end में add करे 

अब ये आखिरी step है जिसके बाद आपके post में Table of Contents add हो जाएगा। आपने post के end में जाना है और निचे दिए गयी code को end में past कर देना है। और अब आपके post में Table of Contents add हों चुक्का है।

code below -

</div> <script>mbtTOC();</script>

आप चाहें तो वो रंग बदल सकते हैं-

आपको कैसे color को change करना है वो मेने आपने youtube  video में बता दिआ हुं। अगर आप चेंज करना चाहते है तो आप मेरी इस video को देख सकते है। 

Change background color #FFFFEO

Change border color #f7f0b8

Change font color #707037

Change Anchor link color #0080FF

Change the font size of anchor Links 15px

Change the font size of TOC heading text 20px

Conclusion

अब आपके पोस्ट में Table of Contents add हो चुक्का है। दोस्तों आपने हमारे बताये गये step के अनुसार  सभी code को आपने blogger में लगालिये होंगे। तो आज की इस article में आप सब अपने website में Table of Contents को कैसे add करने के बारे में सीखे और उसे अपने ब्लॉग में भी लगाया। और इस Table of Contents के box के colors को भी कैसे change करना है वो भी सिख लिए। अगर आप color चेंज करना चाहते है तो ऊपर मेने color code के साथ किसके लिए वो code है मेने लिख दी है अगर आप color code को चेंज नहीं कर पा रहे है तो आप मेरे youtube video को देख सकते है।