{ 3 Easy Steps } Blogger में Table of Contents (ToC) कैसे Add करे |

{ 3 Easy Steps } Blogger में Table of Contents (ToC) कैसे Add करे : नमस्कार दोस्तों, आज के इस article में आप को बताऊंगा के कैसे आप आसानी से अपने blogspot platform पर बनाये हुए Blog में Table of contents add कर सकते है | मैंने Facebook पर इस बारे में बहुत से bloggers से पूछा था कि वो इस बारे में जानना चाहते है या नहीं, बहुत से लोगो ने उस post पर comments में बताया था कि वो कितने दिनों से इस बारे में search कर रहे है, so उनकी help के लिए ये post लिख रहा हु और मुझे उम्मीद है आप को ये article बहुत ज्यादा पसंद आएगा | Table of Contents किसी भी technical blog के लिए बहुत ही important है और इसका उपयोग कर आप post को points में divide कर एक ही जगह points के रूप में show कर सकते है | So post को relax होकर पूरा पढ़े और Steps को follow करते हुए Blogger में ToC Add करे |

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

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

यहाँ मै बहुत ही सरल language में आप को बता देता हु की ये websites में post के First paragraph के बाद show की जाती है और mostly इसमें headings और subheading का use किया जाता है जो एक लिंक की तरह होता है जिस पर click करते ही आप एक specific webpage पर पहुँच जाते है |

Normally इस type की TOC HTML से बनाई जाती है जो की आप को एक web page पर किसी खास जगह पर move कर देती है इसके लिए TOC को बनाने में header और sub headers का use किया जाता है | कई बार आप ने देखा होगा की कोई Post बहुत long होती है और उसमे बहुत सी heading और subheading होती है, तो उस तरह की posts में एक खास तरह की table बना दी जाती है जो usually post के first paragraph के बाद show की जाती है, जिससे की post पढ़ने वाले को जिस point के बारे में जानना है वो table में दिए points पर click कर instantly वहा पर move हो सकता है और अपने काम की जानकारी हासिल  कर सकता है |

ToC Plugin क्या है 

TOC Plugin, Famous blogger MBT के द्वारा develop किया गया है और इसका उसे कर आप automatically किसी भी post या pages में आसानी से table of contents को show कर सकते हो इसके लिए आप को बार बार किसी special javascript की जरुरत नहीं होगी | एक बार template में इसको Install करना है उसके बाद आप table को किसी भी post/pages में show कर सकते है |

हालाँकि इस तरह की table बनाने के लिए आप को आसानी से java scripts codes मिल जायेंगे लेकिन वो सभी website की loading speed के point of view से सही नहीं है क्यों कि उससे speed slow हो जाती है | लेकिन यहाँ पर जो java script code दिया गया है वो pure है और काफी फायदेमंद है | 

TOC Plugin के Features 

यहाँ मैं आप को short में इस TOC Plugin के कुछ खास features के बारे में बताने वाला हु की इसको और भी special बनाते है | 

1. Pure Javascript में इस plugin को code किया गया है | 
2. Light weight और Fast है | 
3. SEO Friendly है | 
4. Unique ID का Use किया गया है जो किसी भी particular section को automatically capture कर सकती है | 
5. Ordered और unordered list बनाने में सक्षम 
6. Toggle Button 
7. Table कही भी show करवा सकते है 
8. Easily Customized 
9. Mobile Responsive 
10. Executes only when invoked

Blogger में Table of Contents (ToC) कैसे Add करे

जैसा की मैंने पहले ही बताया है ToC को Blogspot में add करना बहुत ही सरल है | निचे आप को step by step process बता रहा हु जिसको बहुत ही ध्यान से follow करना है | 

1. सब से पहले Blogger में login कीजिये और उसके बाद template/theme में जाये (Must Download Backup of template before proceed)| 

2. यहाँ आप को </head> लिख कर सर्च करना है | इसके लिए आप computer short cut keys, CTRL+F का use कर सकते है | 

3. अब Just </head> के ऊपर निचे दिए गए 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[           
//*************TOC plugin by 
MyBloggerTricks.com           
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>
     

Note: अगर  आप की posts में main heading H2 तो आप को कोई बदलाव करने की जरुरत नहीं है अगर H2 Main heading नहीं है तो आप को h2 को h3 से replace करना होगा जो की yellow color में ऊपर दिया हुआ है |
4. अब आप को Blogger Template में फिर से CTRL+F की help से </b:skin> लिख कर सर्च करना है |
5. </b:skin> के Just ऊपर निचे दिया गया code copy कर के paste करना है |

/*####Automatic TOC Plugin by
 MyBloggerTricks####*/          
.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;}
     

ऊपर दिए गए CSS Code में आप अपने According बदलाव भी कर सकते है इसके लिए आप को निचे मुख्य जानकारी दी जा रही है |

ToC का background color Change करने के लिए #FFFFE0 इस code को edit करे |
Table of contents का border color बदलने के लिए #f7f0b8 इस code में बदलाव कर सकते है |
TOC headline text को बदलने के लिए #707037 इस में change कर सकते है |
Anchor link color बदलने के लिए #0080ff इस code रूपांतरण कर सकते है |
Font size of anchor links edit करने के लिए 15px को change कर सकते है |
Font size of TOC headline text में बदलाव के लिए 20px इसको Replace कर सकते है |

6. इस step में आप को फिर से Blogger Template में CTRL+F keys press कर <data:post.body/> लिख कर search करना है उसके बाद निचे गए code से replace कर देना है |
Note: आप को <data:post.body/> code template में 3-4 बार मिलेगा So सभी को निचे दिए गए code से replace करना है |

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

7. अब आप Template को save कर दीजिये |

Pages/Posts में Table of Contents Show कैसे करे |

यहाँ तक आप का लगभग पूरा काम complete हो गया है और अब आप Blogger में Toc Add करने के लिए तैयार है So post को Follow करते हुए निचे दिए जा रहे कुछ और steps को follow कीजिये उसके बाद आप आसानी से Blogger में Table Add कर लेंगे |
1. सब से पहले Post editing के HTML में जाये और First Heading से पहले आप निचे दिए code को Copy कर के Paste कर दे | आप just first heading के पहले भी इस code को add कर Table show कर सकते है |

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

 Note: अगर Table show नहीं हो रही है तो आप ol को ul से replace करे |

2. अब आप को post के End में जाना है और वहां पर निचे दिया हुआ Code Add करना है |

<script>mbtTOC();</script>

3.अब Post को save कर publish कर सकते है |

अगर आप ने सभी Steps को ध्यान से Follow किया है तो Table of Contents Blog post में जरूर show होने लग जाएगी |

Blogger ToC Plugin Add करने के Benefits

यहाँ मैं आप को जो बाते बताऊंगा  उनके बारे में जानकर आप हैरान रह जायेंगे और सोचेंगे कि मुझे अभी तक इस बारे में क्यों नहीं पता था | यहाँ निचे एक screenshot mention कर रहा हु जो इस बात का proof है जो मैं आगे बताने वाला हु |

अब शायद तक आप को अंदाजा हो गया होगा कि मैं किस benefit के बारे में बात कर रहा हु | ऊपर mention किये हुए screenshot में आप देख सकते है कि किस तरह से Blogger ToC Plugin SERPs Improve करता है साथ ही जिस post या pages में आप ये Table add करेंगे वो जरूर Search Engines में टॉप पर आएगी | हालाँकि ये जरुरी नहीं है की Searching में Top पर ही आये लेकिन काफी हद post का SEO Improve होगा और आप को इस से बहुत फायदा मिलेगा |

TOC Plugin Copyright

Note: इस Article का पूरा श्रेय mybloggertricks.com को दिया है |

जब आप तक आप खुद इस Blogger ToC Plugin को Add कर के experiment कर के देख नहीं लेते आप को इसके benefits के बारे में पता नहीं चलेगा | So आप को ये table blogger में जरूर add करनी चाहिए |

Conclusion: दोस्तों मैंने अपनी तरफ से इस post में सभी steps को बहुत ही ध्यान से explain किया है ताकि किसी भी नए Blogger को ToC Plugin add करने में परेशानी ना हो, लेकिन फिर भी, अगर आप को इस post को Follow करते हुए Table of Contents add करने में दिक्कत आ रही है तो आप comments में बता सकते है, मैं आप की पूरी हेल्प करूंगा | साथ ही, अगर आप को ये Article पसंद आया है तो आप इसको Social Media पर जरूर शेयर करे और ऐसे ही useful posts की Latest updates के लिए मेरे blog को subscribe करे |