Blogger Ke Post Me Table Of Contents Kaise Add Kare?

हेलो फ्रेंड्स, आज हम लोग Blogger से संबंधित एक और महत्वपूर्ण टॉपिक के बारे में जानने जा रहे हैं और वो है कि आप अपने Blogger Post Me Table Of Contents (TOC) Kaise Add Kare? फ्रेंड्स अगर आप WordPress पर Blogging करते हैं तो आप Plugin की मदद से बड़ी ही आसानी से Table Of Contents (TOC) Add कर सकते हैं लेकिन अगर आप Blogger.com पर Blogging करते हैं तो Table Of Contents ऐड करने के लिए आपको HTML editing की Knowledge होनी चाहिए |

अगर आपको HTML editing कि नॉलेज नहीं है तो कोई बात नहीं इसमें आपको टेंशन लेने कि कोई जरुरत नहीं है क्योंकि मैंने यह पोस्ट आप सभी के लिए ही लिखा है | आप इस पोस्ट को ध्यान से पढ़कर नीचे दिए गए step फॉलो कीजिए जिसके बाद आप भी अपने ब्लॉगर पोस्ट में table of contents बड़े ही आसानी से add कर पाएंगे लेकिन उससे पहले हमलोग TOC के बारे में जान लेते है ताकि बाद में आपको अपने blog post में TOC ऐड करते समय किसी भी तरह का कोई परेशानी ना हो |

Table Of Contents (TOC) क्या है?

Table of Contents किसी भी post का Structured Overviews होता है जिससे हमारे post का headings और subheadings (h1, h2, h3, h4 ) hyperlink के फॉर्मेट में रहते है जिसकी help से readers हमारे contents को बड़े ही आसानी से बढ़ पाते है |

आपने देखा होगा किसी भी Book के शुरुआत में आपको table of contents जरूर मिला होगा और उस बुक में मजूद headings और subheadings को पेज नंबर के साथ दिया जाता है और उसी table of contents की मदद से हम पता कर लेते है कि हमें इस बुक में क्या क्या पढ़ने को मिलेगा |

Table Of Contents (TOC) हमें क्यों Add करनी चाहिए ?

अगर आप बहुत बड़ा articles (2000-3000 शब्द) लिखा करते है तो आपको table of contents जरूर add करनी चाहिए क्योंकि कई बार readers लम्बे article होने की वजह से पढ़ना नहीं चाहते है और पोस्ट को बंद कर देते है | जिसके कारण आपके पोस्ट पर bad impressions पड़ता है और आपका पोस्ट की ranking धीरे धीरे डाउन होने लगती है |

मेरे कहने का मतलब है की readers छोटे पोस्ट को आसानी से पढ़ लेते है लेकिन बड़े पोस्ट को ठीक से नहीं पढ़ते इसलिए जब भी आप बड़े पोस्ट लिखे तो उसमें table of content जरूर add करें | आपने देखा भी होगा wikipedia के ज्यादातर articles की शुरुआत में table of contents जरूर होता है इसका सबसे reason यह है कि इससे user को articles पढ़ने में आसानी होती है और इससे user experience भी मिलता है |

इसके अलावा table of contents की वजह से आपके blog का SEO भी improve होता है और कई कई बार तो आपके blog post के title के साथ साथ आपके पोस्ट का headings और subheadings भी google search engine में rank कर जाता है |

आप में से ही एक blogger ने पूछा था की आप अपने blog post में TOC क्यों नहीं लगाया है? तो आप सभी blogger भाइयों से यहीं कहूंगा की में ब्लॉगर से संबधित पोस्ट लिखता हूँ और blogging से संबधित जानकारी प्राप्त करने के लिए जरुरी है कि आप पूरे post को ध्यान से पढ़ें | अगर आप post को कहीं कहीं से पढ़ोगे तो आप निश्चित गलती करोगे इसलिए मैं इस तरह के आर्टिकल में table of contents (TOC) add नहीं करता |

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

Blogger के किसी post में table of contents को add करना बहुत सरल है | बस आपको अपने blogger ब्लॉग के theme वाले सेक्शन में जाकर कुछ कोड paste करना है | उसके लिए आपको नीचे दिए गए step को ध्यान से पढ़कर उसे follow करना है | तो आइये जानते है Blogger me Table of content Kaise Add Kare?

Step #1

1. सबसे पहले आप Blogger.com जाकर Sign In करे |

2. Sign In करने के बाद अपने ब्लॉग के dashboard में “Theme” वाले option पर क्लिक करे |

3. उससे पहले आप अपने ब्लॉगर के theme को एक बार backup करके जरूर रख लें ताकि बाद में अगर किसी भी तरह की कोई गलती होती है तो आप फिर उस theme को अपने ब्लॉग पर Re-Upload कर सके |

4. Theme का backup लेने के लिए आपको अपने ब्लॉग के डैशबोर्ड में जाकर Settings>>Manage Blog>>Back up content पर क्लिक करके Download करे |

5. उसके बाद theme वाले option में जाकर “Edit HTML” पर क्लिक करके ओपन कीजिये |

6. अब आप इस HTML कोड में कहीं भी क्लिक करके अपने कीबोर्ड से Ctrl+F बटन press करे, उसके बाद ऊपर एक box दिखाई पड़ेगा | यहाँ
आप </head> type करके Enter press करें |

</head> tag के ठीक ऊपर निचे दिए गए Code को Copy करके paste करे |

Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |

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

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

Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |

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

आपको फिर से Search Box में जाकर <data:post.body/> को Find करना है और निचे दिए गए Code को copy करके उस Code को <data:post.body/> के स्थान पर Replace कर दीजिए ।

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

Note:-  कभी कभी blog में <data:post.body/> Code एक ज्यादा बार होता है तो आप Find करके सभी जगहों पर निचे दिए गए Code को उस स्थान पर Replace करे।

सभी Code को सही तरह से Paste कर लेने के बाद last में “Save Theme” पर Click करें।

इन्हें भी पढ़े –

Blog Post Me Code Box Kaise Lagaye?
Blog Sitemap Ko Google Search Console Me Submit Kaise Kare?

Step #2

अब आप अपने blog Post को ओपन करके HTML mode में ओपन कीजिये | उसके बाद आप जहाँ भी Table Of Contents लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy करके उस जगह पर paste करें | 
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

Next निचे दी गयी कोड copy करे और इसे अपने post के HTML में जाये और इसे End में paste कर दे।

<script>mbtTOC();</script>

Conclusion 

आशा करते हैं कि आपको हमारी यह पोस्ट Blogger Post Me Table Of Contents (TOC) Kaise Add Kare? जरूर पसंद आई होगी एवं इसके साथ ही आपको How to Add Table of Contents (TOC) in Blogger Post. इसके बारे में भी सारी जानकारी आपको हमारे इस post के माध्यम से मिल गई होगी तो इस post को अपने दोस्तों में share जरूर कीजिए |

Blogger me Table of content Kaise Add kiya jata hai आपको कैसी लगी हमें comment box में  जरूर बताएं एवं क्या इसमें मुझसे कोई Step छुट गयी है या फिर कोई error हो तो भी आप हमें comment box में बता सकते है, मैं पूरी कोशिश करूँगा की मैं आपके सवालों का जवाब जल्द से जल्द दें सकूँ |

आगे भी ऐसी ही महत्वपूर्ण जानकारी प्राप्त करने के लिए बने रहे Techify ideas पर, धन्यवाद!

आपको यह पोस्ट कैसी लगी ?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Ravi Ranjan

Hello friends, मेरा नाम Ravi Ranjan हैं और मैं Blogging करने के साथ-साथ Youtuber भी हूँ | इस Blog में मैं Tech news, Blogging, SEO, Internet, Earn money, Job और Facebook जैसे अनेक Topic पर पोस्ट लिखता हूँ | blogger पर मेरा मेन मकसद है कि मैं आपको अच्छे से अच्छे जानकारी दूँ ताकि आप Technology के क्षेत्र में पीछे ना रहें |

Leave a Comment