अपने ब्लॉग पोस्ट में 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 करे-

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

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

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

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

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 के बारे में बताने वाला हूँ।

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

Toc के फायदे

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

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

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

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

अब बस 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 करना न भूले. में मिलता हूँ आप सब से अगली बार तब तक लिए स्वस्थ रहे और कुछ नया सीखते रहे।

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