Blogger me Table of Contents kaise add kare

 Table of Contents kaise add kare: नमस्कार दोस्तों, mhtechtips पर आपका स्वागत हे। आज हम आपको बताने वाले हैं की blogger में Table of Contents(TOC) kaise add कर सकते है। कुछ plugin का उपयोग करके wordpress में Table of Content add करना बहुत आसान है। लेकिन ब्लॉगर में Table of Content add करना बहुत मुश्किल है क्योंकि ब्लॉगर plugin का समर्थन नहीं करता है।

यहाँ, आज मैं आपको ब्लॉगर में Table of Content add करने के लिए कदम दर कदम मार्गदर्शन करूँगा। इसे अपने ब्लॉग में जोड़ने से पहले आपको ब्लॉगर ब्लॉग पोस्ट में Table of Contents(TOC) होने के कुछ लाभों को जानना चाहिए।

Blogger में ToC को Add करना बहुत ही आसान है मतलब कि आपने इसको अपने template में एक बार add कर दिया उसके बाद आपको same process बार बार दोहरानी नहीं पड़ेगी और blogspot में ये सब आसानी से हो जाएगा।

Table of Content (ToC) क्या है?

Table of Content को short में TOC भी कहा जाता है। Table of Content एक title and topic’s के लिंक के साथ blog post में शामिल topicsand subtopics की एक सूची है, जो आमतौर पर blog की शुरुआत में और blog और article के पहले Headings और Subheadings  से पहले पाया जाता है। यदिआप Table of Content के किसी भी लिंक पर क्लिक करते हैं, तो यह एक specific section या topic पर भेज देगा।

इसकी help से पोस्ट को पढ़ने वाले readers को यह पता चल जाता है कि article में कौन कौन से topic cover किए गए हैं।

Table of Contents (TOC) के फायदे?

1. इससे आपके ब्लॉग का SEO Improve होता है।
2. Search Engine में post title के साथ साथ headings और subheadings भी rank करता है।
3. TOC के मदद से आप पोस्ट में जिस टॉपिक को पढ़ना चाहते है, उस टॉपिक आप सीधे पर जा सकते हैं।
4. Readers को एक अच्छा User Experience देता है।
5. इसके Structure Overview से आपके Articles और ज्यादा Professional और Attractive दिखते है।

Blogger Post में Table of Contents(TOC) कैसे Add करें?

Step 1:- 

सबसे पहले अपने blogger पर Login करें जिसमें आप Table of Contents (TOC) जोड़ना चाहते हैं।

उसके बाद theme option पर क्लिक करें।

उसके बाद आप अपने theme का backup ले कर अपने system पर download कर लेना हैं। ताकि अगर किसी भी प्रकार की गलती होती है तो आप वापस अपनेTemplate को Re-Upload कर सकते है।

उसके बाद Edit HTML  पर क्लिक करें।

Step 2:-

अब आप HTML Editor Box के अंदर कहीं भी क्लिक करे और Ctrl + F बटन press करे।

अब आपको search box के अंदर </head> सर्च करना हैं।

</head> tag के ठीक ऊपर निचे दिए गए Code को Copy करे और यहाँ Paste कर दें।

<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 3:- उसके बाद आपको Search Box में  ]]></b:skin>  Find करना है। और फिर निचे दिए गए Code को copy करे और ]]></b:skin> के ठीक ऊपर paste कर दें।

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

Step 4:- उसके बाद आपको Search Box में  <data:post.body/>  Find करना है और निचे दिए गए Code को copy करे और उस Code के place में इसे Replace कर दें।

Note: यदि यह कोड आपको एक से अधिक बार मिलता है तो आपको सभी जगहों पर नए कोड से बदलना होगा।

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

उसके बाद आप Save Theme पर Click करें।

Step 5:- अब आप अपने Post के HTML सेक्शन में जाये और जहाँ भी Table Of Contents लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy करे और उसजगहे पर paste कर दे।

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

आपको इस code को हर एक पोस्ट / पेज पर add होगा।

Step 6:- उसके बाद आप निचे दिए गए Code को Copy करे और इसे अपने post के HTML में End में paste कर दे।

<script>mbtTOC();</script>

इस ब्लॉग पोस्ट को पढ़ने के लिए धन्यवाद, मुझे उम्मीद है कि इससे आपको ब्लॉगर में सामग्री की तालिका जोड़ने में मदद मिलेगी। कृपया इसे अपने सोशल मीडिया पर शेयर करें। 

Previous article

Next Post

Next article

Previous Post