2 Simple Steps Blogger Post me Table Of Contents Kaise Add Kare | My Sharing Ideas - माय शेयरिंग आइडियाज

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


Blogger 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 करे ?

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 www.mysharingideas.com
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 Mysharingideas####*/
.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 करना है।
Source Code Developed by : My Blogger Tricks

Conclusion

13 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
  3. Replies
    1. Sir aapke blog me rable of content kaam karega but aapko jab post likhte smaya apni post ki heading ko h2 ya to h1 ya h3 me dalo kyunki jo is blog par code dia gaya hai usme h2 3 4 kaam karega ye mujhe nhi pata hai but mene pehle yahi mistake kia tha lekin mene table of contents yaha se nhi dala hai so isiliye nhi pata hai ki is code me id h2,h3, h4 me se kon si hai

      Delete
  4. @Vishal Meena
    post ke Heading(h2,h3,h4) ek hi line me hona chahiye, example ke liye apka heading is prakar se hona chahiye...
    < h.2 >Heading Example < / h2. > yah ek line me likha gaya hai.
    aur yadi apka heading is prakar se likha hoga:-
    < h.2 >
    Heading Example < / h2. >to yah work nhi karega.
    So aap jis post me TOC lagana chahte hai , us post ke HTML me jaye aur heading jo ki compose mode me karne se heading upar-niche ho jati hai, use ek line me karen.
    wapas mujhe reply jarur karen.

    ReplyDelete
  5. Sahi bataya karo
    Logo ko gumrah mat karo froud trick se

    ReplyDelete
  6. ]]> (ya show nahe ho raha hai)
    sir table of content add nahe ho raha hai

    ReplyDelete
  7. Very helpful information. Thanks boss, but which Template use in this blog? I need a template Like this. Please say Template name

    ReplyDelete
    Replies
    1. Hi Debashis

      it is 3rd party custom Template. I have customized this theme. Anyway, There is link to download https://btemplates.com/2020/blogger-template-lms-education/demo/

      Delete
    2. Thanks for giving information

      Delete
  8. it's really work fine, Thanks for giving valuable information boss.
    https://www.pkvtechnical.com/

    ReplyDelete