2 Simple Steps Blogger Post me Table Of Contents Kaise Add Kare

Simple #2 Steps Blogger Post me Table Of Contents Kaise Add Kare

Blogger Par Post me Table Of Contents (TOC) Kaise Add Kare, यदि आप Blogger की Hosting use कर रहे है तो आपको यह अच्छी तरह मालूम होगा। ब्लॉगर होस्टिंग में WordPress जैसी कोई TOC Plugin उपलबध नहीं होती है ऐसे में आप लम्बे Articles में Table of Contents नहीं लगा पाते जो की आपके Visitor के user experience लिए एक बुरी बात होती है। visitor आपके लम्बे Article देख कर back भी हो सकते है क्यूंकि उन्हें आपके Heading, Subheading यह सब ठीक तरह समझ में नहीं आती है इसलिए अपने पोस्ट में TOC जरूर से लगाए।

लेकिन Blogger User के लिए चिंता की बात नहीं है यह पोस्ट में दिखाए गए Image की तरह आप भी अपनी पोस्ट में Table of Contents लगा पाएंगे। बस आपको कुछ basic सी सेटिंग को जानना होगा।



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

किसी भी article का Structure overview को Table of Contents कहा जाता है।

Table of Contents (TOC) लगाने के क्या फायदे है ?

TOC एक ऐसी feature है जिसे आप अक्सर Wikipedia के pages पर लंबे Article के लिए आसान navigation प्रदान करने के लिए देखते हैं। विकिपीडिया एक TOC जोड़ना पसंद करता है क्योंकि यह readers को एक अच्छा user experience देता है और एक से दूसरे भाग में आसानी से jump करने में मदद करता है। अब बात करते है इसके खास फायदे के
  1. Table Of Contents add करने से यह आपके SEO को Improve करता है। 
  2. Google Search Engine आपके post title के अलावा heading और subheading को भी Rank करता है। 
  3. Readers को आपके Articles पढ़ने में आसान बनाता है। 
  4. इसके Structure Overview से आपके articles ज्यादा Attractive और Professional दिखते है जो कि Readers को आपके website की ओर trust को बढ़ाता है। 

Table of Contents (TOC) के Features

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

Blogger पर Post में Table of Contents Add करना बहुत ही सरल है। आपको बस अपने Template में जा कर कुछ कोड को Paste करना है। आइये चीजों को step by step समझते है।

दिए गए Step को Carefully follow करें

Step #1
  1. अपने Blogger Account को Sign In करे 
  2. Theme option को क्लिक करे
  3. यहाँ से आप अपने Template का पहले Backup रख लें यदि किसी भी प्रकार का गलती होती है। तो आप वापस Template को Re-Upload कर सकते है।
  4. फिर क्लिक करे 'Edit HTML' पर
  5. अब इस Edit HTML Section पर कहीं भी क्लिक करे और Ctrl + F बटन press करे, आपको एक Box दिखाई पड़ेगा। यहाँ पर आप Type करे </head> फिर Enter बटन press करें।
</head> tag के ठीक ऊपर निचे दिए गए Code को Copy करे और यहाँ Paste कर दें।



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


/*####TOC Plugin V2.0 by https://www.freehelptips.in####*/ .mbtTOC2{border:1px solid #e6e6e6;background-color:#FFFFE0;color:#333;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px; font-family:Oswald, arial;display: block;width: 80%;} .mbtTOC2 button{background:#f9f9f9; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#333;padding:0 0 0 15px;} .mbtTOC2 button a {color:#0080ff; 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:#0080ff; text-decoration:none; font-size:18px;} .mbtTOC2 li a:hover {text-decoration: underline;} .mbtTOC2 li li {margin:4px 0px;} .mbtTOC2 li li a{ color:#289728; font-size:15px;} .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3;margin: 10px 0px;} .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}


Finally आपको Search Box में  <data:post.body/>  Find करना है और निचे दिए गए Code को copy करे और उस Code के place में इसे Replace कर दें ।
 
<div id="post-toc"><data:post.body/></div>

सभी Code ठीक तरह से Paste हो जाने के बाद Save Theme पर Click करें।


Step #2

अब आप अपने Post के HTML सेक्शन में जाये और जहाँ भी Table Of Contents लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy करे और उस जगहे पर paste कर दे। Mostly Bloggers Recommend करते है आपके पोस्ट के पहले heading के ठीक ऊपर ताकि आपके Readers Article के शुरुआत में ही जान सके यह उनकी काम की चीज है या नहीं।

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

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

<script>mbtTOC2();</script>

Final Step अब अपने Post के HTML सेक्शन में जाये और अपने जितने भी Heading (H1 H2 H3 H4 H5 H6) का use किया है उनमे आपको id="point1" Add करना है। उदाहरण के लिए निचे दिए गए Image से समझे।
सब complete हो जाने के बाद post Publish करे

Simple #2 Steps Blogger Post me Table Of Contents Kaise Add Kare

Note : id="point1" (id) अलग अलग use करे जैसे आपने पहले heading में point1 दिया है तो दूसरे में point2, point3, point4 दे, जितने आपके heading है। और ध्यान रहे की आपको HTML सेक्शन में रह कर ही post को publish करना है।

Conclusion

Post a Comment

1 Comments

  1. Wow Great Sir Very Nice Article I Love It.
    Really Great Article....!!! ( Technical Prajapati )

    ReplyDelete

आप अपनी राय हमें कमेंट कर के बताये