[Setup Automatic TOC] Blog में Table of contents कैसे लगाएं? WordPress और Blogger दोनों में

आज हम विस्तार में समझेंगे की Table of contents क्या है और क्यों लगाना चाहिए? Blog post में Table of contents कैसे लगाएं? वर्डप्रेस और ब्लॉगर के सभी पोस्ट में table of contents कैसे add करें? और Blog में Table of contents कैसे बनाये?

आपने किसी वेबसाइट पर जरूर देखा होगा कि सारे topics के headings का link एक box में Table format मिलता है जिसपर क्लिक करके किसी particular topic पर jump कर सकते है।

अक्सर इसका उपयोग मैक्सिमम ब्लॉगर करते है और table of contents एक feature की तरह useful है जिसे सब ब्लॉगर अपने ब्लॉग पोस्ट में add करना चाहते है। लेकिन प्रश्न ये आता है कि Blog post me table of contents kaise lagaye?

तो इस परेशानी का हल आपको यहाँ दिया है जिसमे wordpress और blogger दोनों platforms के लिए add table of contents hindi के बारे में बताया है। क्योंकि हर ब्लॉगर अपने अनुसार अलग प्लेटफार्म पर ब्लॉग बनाएं हुए है।

चलिए table of contents add करने के बारे में detail में जानते है और नई-नई जानकारी को भी explore करते है। नीचे दिए गए यह Box ही Table of Contents है, इसे ध्यान से देखें और समझें-

Table of Contents

Table of contents क्या है?

ब्लॉग पोस्ट के किसी topic पर jump करने के लिए पोस्ट के headings को link format में add करने को Table of contents कहते है।

मतलब आपने 1000 वर्ड का एक ब्लॉग पोस्ट लिखा है जिसमें आपने 10 heading बनाया हुआ है (h1, h2, h3 का) अब कोई विजिटर डायरेक्ट 8वें heading को पढ़ना चाहता है, तो इसके लिए table of contents का इस्तेमाल करते है।

जिसमे किसी heading पर jump करने के लिए उस heading का ही link format में परिवर्तन कर दिया जाता है। इस फीचर के कारण कोई reader अपने मन से कोई information आसानी से पढ़ पाएगा।

Also read:-

WordPress और ब्लॉगर दोनों के लिए table of contents add करने का तरीका बिल्कुल अलग है। इसे आगे मैंने डिटेल में बताया है कि Blog me Table of contents kaise banaye?

Table of contents क्यो लगाना चाहिए?

Readers के perspective से table of contents लगाना जरूरी होता है जिससे आसानी से किसी पर्टिकुलर टॉपिक पर वो jump करके अपने जानकारी को explore कर पाएं।

SEO के purpose से Table of content बहुत connect करता है क्योंकि WordPress ब्लॉग में Rankmath या AIOSEO जैसे plugins भी table of contents add करने के लिए condition देते है।

अगर आप add नही करते है, तो वो plugins ही आपको error दिखाने लगेगा जिससे आपको थोड़ा confusing लग सकता है। मतलब reader और seo दोनों के लिए table of contents add करना बेहद जरूरी हो जाता है।

Table of contents कैसे लगाएं- Table of contents kaise add kare?

ब्लॉग के सभी पोस्ट में Table of contents add करना difficult नही है लेकिन इसके लिए आपको कुछ स्टेप्स फॉलो करने होंगे। लेकिन अगर आपका ब्लॉग wordpress या blogger पर है, तो दोनों के लिए proccess अलग होगा।

WordPress के ब्लॉग में table of contents आसानी से add किया जा सकता है क्योंकि इसके लिए यहाँ plugins मौजूद होते है जिन्हें activate करना होता है और automatically सभी पोस्ट में TOC Add हो जाता है।

वहीं blogger के ब्लॉग में table of contents add करने के लिए plugins की सुविधा नही होती है। यहाँ आपको coding की जरूरत होती है, तभी TOC लगा सकते है। coding करने के लिए आपको परेशान नही होना है क्योंकि मैंने सभी को clearly बताया है।

WordPress blog post में Table of Contents कैसे लगाएं?

WordPress में Table of contents plugin install और activate करने आसानी से TOC लगाया जा सकता है। नीचे कुछ आसान steps में इसे cover किया है। इन steps को follow करें-

Steps 1. Install and activate Table of contents plugin

1. WordPress में table of contents बनाने के लिए पहले वर्डप्रेस के admin dashboard को Id और password से login करें।

2. Dashboard को login करने के बाद plugins section में जाएं और वहाँ Add new plugin के बटन पर क्लिक करें। फिर Search box में Type करें ‘Easy Table of Contents’ यहाँ plugin आ जाएगा।

नीचे Install के बटन पर क्लिक करें फिर install होने के बाद तुरंत activate का बटन आएगा इसपर क्लिक करके इसे activate करें।

Step 2. Table of contents plugin setup

1. Plugin install और activate करने के बाद wordpress dashboard के साइड में दिए settings option पर क्लिक करें।यहाँ Table of contents का option दिखाई देगा इसपर क्लिक करके ओपन करें।

2. General Option- यहाँ कई सारा ऑप्शन देखने को मिलेगा जिसमें General पहला है। अगर आप पोस्ट में manually table of contents को add करना चाहते है, तो general में post और pages पर check mark करें।

3. Auto Insert Option- इस option की मदद से आप ब्लॉग के सभी पोस्ट में automatic table of content लगा पाएंगे। सिर्फ आपको Post और Pages के option को check mark करना है।

Note:- H1 ब्लॉग पोस्ट का Title होता है, इसलिए हमेशा ध्यान रखें Table of contents में H1 को छोड़कर सभी Headings पर check mark करें।

4. Position- यहाँ आपको कई सारे ऑप्शन देखने को मिलेगा लेकिन इसमे default setup हुआ रहता है, तो इसे default पर ही छोड़ दें।

5. Header lable- यहाँ Table of Contents के lable को change कर सकते है। मेरा राय है कि इसे Table of contents पर ही default रखें, कोई customisation न करें।

6. Toogle View- इसे check mark जरूर करें। इस ऑप्शन की मदद से कोई विजिटर table of contents के view को enable या disable कर सकता है, सिर्फ खुद के लिए।

7. Headings Option- इतना करने के बाद सबसे नीचे जाएं यहाँ headings का option मिलेगा। यहाँ H2 से लेकर नीचे सभी को check mark करें।

फिर नीचे दिए Save Changes बटन पर क्लिक करके इस setup को save करें। आपके सभी ब्लॉग पोस्ट में table of contents automatically लग जाएगा। ऊपर कुछ ऐसे option है जिसकी मदद से TOC को आप कस्टमाइज कर सकते है जैसे color combination, text size, font, height और width.

Blogger blog post में Table of Contents कैसे लगाएं?

ब्लॉगर में table of contents लगाने के लिए आपको बहुत ध्यान पूर्वक काम करना होगा क्योंकि इसमें सारा proccess coding पर depend है।

Important note:- सबसे पहले ब्लॉगर में theme section में जा कर theme का पूरा backup बना लें। ऐसा इसलिए अगर कोई mistake होता है, इसे restore कर पाएंगे।

नीचे दिए सभी steps को follow करें एक भी steps छोड़ना आपका काम बढ़ा सकता है, इसलिए ध्यान से steps को implement करें।

Step 1. नीचे दिए code को blogger में <head> tag के नीचे paste करें-

नीचे दिए गए पूरे code को copy करें।
ब्लॉगर के theme section जाएं।
सबसे ऊपर <head> tag मिलेगा इसके नीचे एंटर करके space बनाएं और यहाँ code को paste करें।

Code:-

<link href=’http://fonts.googleapis.com/css?family=Oswald’ rel=’stylesheet’ type=’text/css’/>
<script type=’text/javascript’>
//<![CDATA[
//*************TOC Plugin V2.0
function mbtTOC2(){var a=1,b=0,c=””;document.getElementById(“post-toc”).innerHTML=document.getElementById(“post-toc”).innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join(“<ol class=’point”+a+”‘>”):e<a&&(c+=new Array(a-e+1).join(“</ol></li>”)),b+=1,c+='<li><a href=”#point’+b+'”>’+f+”</a>”,a=parseInt(e),”<h”+e+” id=’point”+b+”‘>”+f+”</h”+g+”>”)}),a&&(c+=new Array(a+1).join(“</ol>”)),document.getElementById(“mbtTOC2”).innerHTML+=c}function mbtToggle2(){var a=document.getElementById(“mbtTOC2”),b=document.getElementById(“Tog”);”none”===a.style.display?(a.style.display=”block”,b.innerHTML=”hide”):(a.style.display=”none”,b.innerHTML=”show”)}
//]]>
</script>

Step 2. Blogger theme में ये code “]]></b:skin>” सर्च करें और इसके just ऊपर दिए गए code को copy करके paste करें-

नीचे दिए गए पूरे code को copy करें।
ब्लॉगर थीम के coding में “]]></b:skin” इसे सर्च करें। Control+F press करने पर search box मिल जाएगा।
इसके just ऊपर आपको copy किये CSS को paste कर देना है।

CSS Code:-

/*####TOC Plugin V2.0*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 70%;
}

.mbtTOC2 button{
background:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}

.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}

.mbtTOC2 button a:hover{
text-decoration:underline;
}

.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
}

.mbtTOC2 li{margin:10px 0; }

.mbtTOC2 li a {color:#EA1414;

text-decoration:none;

font-size:18px;

text-transform:capitalize;

}

.mbtTOC2 li a:hover {

text-decoration: underline;

}

.mbtTOC2 li li {margin:14px 0px;}

.mbtTOC2 li li a{color:#040404;

font-size:15px;}

.mbtTOC2 ol{counter-reset:section1;list-style:none}

.mbtTOC2 ol ol{counter-reset:section2}

.mbtTOC2 ol ol ol{counter-reset:section3}

.mbtTOC2 ol ol ol ol{counter-reset:section4}

.mbtTOC2 ol ol ol ol ol{counter-reset:section5}

.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}

.mbtTOC2 li li:before{content:counter(section1) “.” counter(section2);counter-increment:section2;font-size:14px}

.mbtTOC2 li li li:before{content:counter(section1) “.”counter(section2) “.” counter(section3);counter-increment:section3}

.mbtTOC2 li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4);counter-increment:section4}

.mbtTOC2 li li li li li:before{content:counter(section1) “.”counter(section2) “.”counter(section3) “.” counter(section4)”.” counter(section5);counter-increment:section5}

/*

.point2 {list-style-type:lower-alpha}

.point3 {list-style-type:lower-roman}

.point4 {list-style-type:disc}*/

Step 3. इस code <data:post.body/> को सर्च करें और नीचे दिए code से इसको replace करें-

  • नीचे दिए code को copy करके रखें।
  • इस code “<data:post.body/>” को search करें। Control+F press करने से search box मिल जाएगा।
  • जहाँ-जहाँ ये code है उसके जगह copy किये इस code को replace करें। मतलब उसे हटाकर उसकी जगह इसे लिखें।

Code:-

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

Step 4. जिस पोस्ट में Table of Contents लगाना है उसके first heading के पहले नीचे दिए code को copy करके paste करें-

  • नीचे दिए code को copy कर लें।
  • अब जिस पोस्ट में TOC add करना है उसके editor को ओपन करें।
  • पोस्ट को HTML view पर switch करें।
    पहले heading से पहले copy किये code को paste करें।

Code:-

<div class=”mbtTOC2″>
<button>Contents <span>[<a onclick=”mbtToggle2()” id=”Tog”>hide</a>]</span></button>
<div id=”mbtTOC2″></div>
</div>

Step 5. Final Step- उसी पोस्ट के HTML view में ही last में इस code को paste करें-

  • फिर से नीचे दिए code को copy करके रखें।
  • पिछले step को follow करने के बाद उसी पोस्ट में सबसे नीचे जाएं।
  • यह HTML view में ही रहे और copy किये code को paste करें।

Code:-

<script>mbtTOC2();</script>

Note:- ऊपर बताये पहले, दूसरे और तीसरे step को सिर्फ एक बार ही blogger के theme html में follow करना है। फिर चौथे और पाचवें step को manually एक-एक post में करना होगा।

इतना करके के बाद आपके blogger के पोस्ट में Table of Contents लग हो जाएगा। ये ज्यादा difficult नही है बस आपको code को copy और paste करके काम करना है।

अगर कोई step नही समझ आ रहा है, तो उसे फिर से जरूर पढ़ें या आप चाहे तो हमसे संपर्क भी कर सकते है। मैं जरूर आपका मदद करूँगा।

Conclusion- Table of Contents कैसे लगाएं?

इस आर्टिकल फॉर्म के ट्यूटोरियल की मदद से आपने जाना कि Table of Contents kaise add kare? और Table of Contents क्यों लगाना चाहिए जिससे आपको इसका benifit भी पता चल जाता है।

ब्लॉग पोस्ट को readable मतलब आसानी से किसी टॉपिक पर jump करने के लिए table of contents लगाना जरूरी है और यह SEO के रूप में भी काम आता है।

मुझे पूरा उम्मीद है आपको Table of Contents कैसे लगाएं? पर यह जानकारी अच्छी लगी होगी और आपको बेहतर जानकारी और value मिला है। इसे अपने ब्लॉगर दोस्तो को जरूर सहस्र करें या उन्हें mention करें पढ़ने के लिए।

FAQs-

Q. Table of Contents कैसे लगते है?

ऊपर wordpress और blogger दोनों के लिए बताये जानकारी से आप आसानी से सभी ब्लॉग पोस्ट में Table of Contents को add कर सकते है।

Q. Table of Contents कहाँ लगाएं?

सभी ब्लॉग पोस्ट में पहले heading के बाद Table of Contents लगाना चाहिए क्योंकि पहला heading पोस्ट का title होता है। मतलब H2 के just पहले Table of Contents लगाना चाहिए।

Q. क्या blogger post में बिना coding के Table of Contents नही लगा सकते?

इसका सीधा उत्तर है नही, आप बिना coding किये blogger के post में Table of Contents नही लगा सकते है। ऊपर बताये सिर्फ पाँच steps में इसे coding से आसानी से कर पाएंगे।

Share It

नमस्कार दोस्तो स्वागत है आपका Readews वेबसाइट पर मेरा नाम है Abhishek Agrahari और मैं Readews.com वेबसाइट का Founder हूँ। मैंने यह वेबसाइट खास उनके लिए क्रिएट किया है, जो Digital Markering को जानना चाहते है क्योंकि यहाँ आपके लिए Blogging और Make Money जैसे Topics पर आर्टिकल मिलेंगे जो नए Updates के साथ है।

Leave a Comment