अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे- How To Add TOC in Your Blog Post

अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे ? यदि आप भी एक blogger है और आपका ब्लॉग Blogspot पर है, तो ये पोस्ट आपके लिए बोहोत ही ज्यादा महत्वपूर्ण है क्योंकि आज की पोस्ट में हम आपको Table of Contents से जुड़ी सारी जानकारी जैसे की Blogger me table of Contents kaise add kre, Table of contents क्या होता है, Table of contents के features और फायदों के बारे में बात करेंगे।

इसके साथ साथ हम ये भी जानेगे की हमे अपने ब्लॉग में Table of Contents क्यों Add करना चाहिए, इसका प्रयोग करने से क्या हमारे ब्लॉग की रैंकिंग में फर्क परता है या हमारे Articles SEO friendly बनते है। इन सारे सवालो के जावाब आज हम आप सभी को बोहोत ही आसान शब्दों में देने वाले है।

अगर आप blogger का इस्तेमाल करते है तो आप भी इस चीज़ से अच्छी तरह से वाकिफ़ होंगे की हमे ब्लॉगर पर Wordpress जितने options और features नही मिलते। जो काम हम Wordpress पर plug-ins की मदद से मिनटों में कर लेते है वही काम हमे Blogger पर करने में काफी ज्यादा वक़्त लग जाता है।

Wordpress पर बोहोत सारे Plugins उपलब्ध है, जिसकी मदद से हम एक Click में ही अपना बोहोत सारा Task कर सकते है वही दूसरी जगह blogger पर हमे छोटी सी चीज़ करने के लिए भी coding की सहायता लेनी पड़ती है। पर यही छोटी छोटी चीज़े ही हमे काफी कुछ सिखा जाती है।

तो चलिए दोस्तों जानते है की Table of contents क्या होता है और ये हमारे ब्लॉग के लिए क्यों जरूरी है।

1 Toc क्या है - What is Table of Contents
2 Toc के Features
3 Toc के फायदे
4 अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे
- 4.1 Automatic Toc kaise Add kre
- 4.2 Manually Table of Contents कैसे Add करे
5 Conclusion

Toc क्या है - What is Table of Contents

Table of Content एक आर्टिकल में दिए गये सभी Topics का एक Summarized structure होता है जिसकी मदद से user एक बारी में ही जान सकता है की Article में किस किस चीजों के बारे में बात की गयी है।

अक्सर लम्बे आर्टिकल्स में Table of contents का इस्तेमाल किया जाता है क्योंकि इससे users को आर्टिकल के बारे में एक clarity मिल जाती है जिसकी मदद से वो सीधा उस टॉपिक पर जा सकते है जिनमे उनका इंटरेस्ट हो।

Read Also:

99% Bloggers इसी वजह से फ़ैल होते है

Toc के Features

अब में आपको Table of Content के कुछ features के बारे में बताने वाला हूँ

यह आपके ब्लॉग को एक Professional look देता है
इससे आपके ब्लॉग की SEO अच्छी होती है
चुकी हमारे दिए गये कोड में सिर्फ html और css का इस्तेमाल हुआ है जिसके कारण आपके ब्लॉग की स्पीड में कोई भी गिरावट नही आती
इसे आप अपने ब्लॉग में जहाँ चाहे वहाँ लगा सकते है
ये पूरी तरह से Mobile friendly है
Expand and Contract Button का इस्तेमाल कर सकते है
Direct Jump to the Topic- इससे user सीधा उस टॉपिक पर redirect हो जायेंगे जिसे वो पढना चाहते है

Toc के फायदे

आपने जब भी Google पर कुछ Search किया होगा तो अपने ये जरुर देखा होगा की सर्च रिजल्ट्स में Wikipedia की वेबसाइट बोहोत बार आई होगी। Wikipedia अपने सारे पोस्ट में Table of contents का उपयोग करता है, ये इस बात का प्रमाण है की इसकी कितनी एहमियत होती है तो चलिए जानते है Table of Contents के कुछ फायदों के बारे में हमारे ब्लॉग पोस्ट में चार चाँद लगा देते है।

सबसे पहले तो ये आपके ब्लॉग की Ranking के लिए बोहोत ही फायदेमंद है। इससे आपका ब्लॉग जल्दी Index होता है नतीजन Ranking भी fast होती है।
यह आपका पोस्ट के SEO में हेल्प करता है जिससे की आपका ब्लॉग और भी ज्यादा यूजर फ्रेंडली और सर्च इंजन फ्रेंडली होता है जिसके कारण आपके ब्लॉग के ट्रैफिक भी Increase होती है
Users के लिए एक लम्बा आर्टिकल पढना बोहोत ही बोरियत वाला काम होता है, ऐसे में users directly उस टॉपिक के बारे में पढ़ सकते है जिसके लिए वे आपके ब्लॉग पर आए हैं
यह आपके ब्लॉग की Navigation को भी improve करता है.
इसके साफ़ और सुथरे डिजाईन और structure से आपके ब्लॉग में एक प्रोफेशनल वाली फीलिंग आती है
इसके Heading और Sub-Heading भी गूगल में रैंक करते है
सबसे जरूरी इसके सहायता से users को एक अच्छा experience मिलता है जिसके कारण users आपके ब्लॉग को याद रख पाते है और दुबारा लोट कर भी आते है

अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे

अब तक हमने जाना की Table of contents क्या होता है और इसे हमे ब्लॉग में क्यों इस्तेमाल करना चाहिए। अब हम जानने वाले है की Table of Contents को अपने blogger के ब्लॉग पोस्ट में कैसे लगाए।

चुकी Blogger में Wordpress जैसे plugins नही होते इसलिए हमे खुद coding का इस्तेमाल कर के अपने ब्लॉग में इसे लगाना होगा।

Table of Contents को लगाने के 2 तरीके है पहले Automatic Method और दूसरा Manual Method। में आपको दोनों methods इसलिए बता रहा हु कई बार Automatic method किसी किसी Theme के साथ काम नही करता ऐसे में आप Manual Mehod का इस्तेमाल कर सकते है वो 100 प्रतिशत सारे themes के साथ काम करता है

तो चलिए जानते है दोनों तरीको के बारे में।

Automatic Toc kaise Add kre

अपने ब्लॉगर ब्लॉग में Automatic Table of Contents Add करने के लिए इन steps को follow करे

सबसे पहले अपने ब्लॉगर account में login करे फिर अपने ब्लॉग के dashboard से Theme option में जाये और Edit HTML पर click करे (अपने theme का backup लेना न भूले )
उसके बाद अपने html कोड में CTRL + F दबाकर </Head> सर्च करे और फिर नीचे दिए हुए कोड को </head> के उपर 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[           
//*************TOC plugin by Shirasta.in           
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>

अब आप एक बार फिर से CTRL + F दबाये और ]]</b:skin> search करे और इसके ठीक उपर नीचे दिए गए code को copy कर के 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;
               }  
			   
.mbtTOC button:after{
        content: "\f0dc"; 
        font-family:FontAwesome; 
        position:relative; 
        left:10px; 
        font-size:20px;
                    }

अब आपको बस एक आखरी step करना है, आप अपने कोड में <data:post.body/> search करना है और उसको नीचे दिए गये कोड से नीचे दिए गये कोड से replace कर देना है, आपको ये कोड अपने ब्लॉग में maximum 2 बार मिल सकता है।

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

अब बस Save Changes पर click करके save कर ले और वहाँ से exit कर के वापस डैशबोर्ड में चले जाये आपके theme की settings हो चुकी है अब केवल आपको जिस पोस्ट में टेबल of Contents चाहिए उस पोस्ट में ये कुछ कोड्स डालने होंगे।

याद रहे अपने पोस्ट को html view में खोले और पहले paragraph के बाद या जहाँ भी आप Table of contents show करना चाहते हो वह ये कोड paste कर दे।

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
</div>

उसके बाद पोस्ट के End में ये एक लाइन का कोड copy कर के paste कर दे और अपने पोस्ट को पब्लिश कर दे।

<script>mbtTOC();</script>

बधाई हो, आपके पोस्ट में automatically Table of Contents Add हो जायेगा।

वैसे तो ये method 100% working है पर कुछ themes के साथ ये अच्छे से काम नही करता ऐसे में आप Manual Method का इस्तेमाल कर सकते है जिसके बारे में मैंने नीचे बताया है।

Manually Table of Contents कैसे Add करे

बोहोत सारे लोग time बचाने के लिए automatic method का इस्तेमाल करते है, जो की में recommend नही करता में Personally अपने इस Shi Rasta ब्लॉग में जो की ब्लॉगर की सहायता से बना है उसमे में Manual method का ही इस्तेमाल करता हूँ और आप लोग को भी manual method को ही उसे करने की सलाह देता हूँ।

तो चलिए जानते है हम Manual method का कैसे इस्तेमाल कर सकते है।

अपने ब्लॉगर ब्लॉग में login करे तथा theme के option में जाकर Edit HTML पर click करे
फिर CTRL + F दबा कर ]]</b:skin/> सर्च करे और इसके ठीक उपर नीचे दिए गए कोड को copy कर के paste कर दे ।

/* Table of Contents by shirasta.in */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Contract';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'Expand'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}

अब अपने theme को save कर दे

आपको जिस पोस्ट में Table of contents चाहिए उसको HTML mode में खोले और जहाँ पर भी आप TOC लगाना चाहते है वह ये कोड paste कर दे।

<div class="toc">
      <input type="checkbox" role="button" id="toctoggle"
      class="toctoggle"><div
      class="toctitle"><h2>Contents</h2><span
      class="toctogglespan"><label class="toctogglelabel"
      for="toctoggle"></label></span></div>
      <ul>
      <li>1 <a href="#toc1" title="First Heading">First Heading</a></li>
      <li>2 <a href="#toc2" title="Second
    Heading">Second
    Heading</a></li>
      <li>3 <a href="#toc3" title="Third
    Heading">Third
    Heading</a></li>
      <li>4 <a href="#toc4" title="Fourth Heading">Fourth Heading</a></li>
      <li>5 <a href="#toc5" title="Fifth Heading">Fifth Heading</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="First sub heading">First sub
      heading</a></li>
      <li>5.2 <a href="#toc5_2" title="Second sub heading">Second sub
      heading</a></li>
      </ul>
      </li>
      <li>6 <a href="#toc6" title="Sixth
    Heading"">Sixth
    Heading"</a></li>
      </ul>
      </div>

अब आप अपने पोस्ट के सारे headers में नंबर wise toc1, toc2 आदि का प्रयोग करे जैसे की

<h2 id= "toc1" >First heading </h2>

<h2 id= "toc2" >Second heading</h2> and so on...

Conclusion

तो दोस्तों मुझे उम्मीद है की आज के ब्लॉग को अच्छे से पढने के बाद आप समझ गये होंगे की Table of Contents क्या होता है और अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे. अगर फिर भी किसी तरह की समस्या आती है तो बेझिझक अपने doubt Comment सेक्शन में पूछे, हम जल्द से जल्द Solution लाने की कोशिश करेंगे।

अगर आपको ये पोस्ट पसंद आई हो तो इसे अपने bloggers friends और Relatives के साथ Share करना न भूले. में मिलता हूँ आप सब से अगली बार तब तक लिए स्वस्थ रहे और कुछ नया सीखते रहे।

मेरा देश! मेरा गर्व! मेरा कर्तव्य!

Niraj Kumar

Shi Rasta एक हिंदी Blog है। इस पर आपको Technology, Blogger, SEO, और Blogging जैसे चीजों की सारी जानकारी मिलेगी, और इसके साथ आपको बोहोत कुछ नया और अनोखा सिखने को मिलेगा। यह मुख्य रूप से एक हिंदी ब्लॉग है। इस पर शेयर किया जाने वाला कंटेंट हिंदी भाषा में होता है। इस ब्लॉग का उद्देश्य जानकारी को हिंदी भाषा में शेयर करना है। Blogging के बारे में Detail में जानने के लिए हमारे ब्लॉग पोस्ट को समय समय पर पढ़ते रहे।