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

2 Simple 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 लगाते है तो आपके Readers को एक Clarity मिलती है की post में आप किन विषयों पर चर्चा कर रहे है। इसलिए अपने पोस्ट में 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 करे ?

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

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 कर दें।

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by FreeHelpTips.in
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>


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


/*####TOC Plugin V2.0 by FreeHelpTips####*/
.mbtTOC2{border:1px solid ##f7f0b8;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px; font-family:Oswald, arial;display: block;width: 80%;}
.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;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 कर दें ।

Note: यदि <data:post.body/> यह Code आपको एक बार से अधिक मिलता है तो सभी जगहों पर निचे दिए गए Code को उस स्थान पर 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>Table of 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>

Note : सब complete हो जाने के बाद post Publish करे और ध्यान रहे की आपको HTML सेक्शन में रह कर ही post को publish करना है।

Conclusion

Post a Comment

3 Comments

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

    ReplyDelete
  2. Hey, Manish Yadav
    aap humare bataye gaye sare step ko dhyan se read kare.. definitely work karega.

    ReplyDelete

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