Sun. Jun 20th, 2021
Table of content आपने इसके बारे में जरूर सुना होगा, अगर मेरे कुछ भाइयो ने इसके बारे में नहीं सुना तो मै आपको थोड़ा सा आईडिया दे देता हूँ table of content  एक बुक की तरह होता है आपने देखा होगा की बुक के पहले पेज पर इंडेक्स पेज होता है जिसमे सारे टाइटल्स लिखे होते है जिनके आगे पेज नंबर लिखा होता है जिससे आपको आईडिया लग जाता है की कौन-सी  स्टोरी कोनसे पेज नंबर पर है ठीक वैसे ही आपकी पोस्ट बहुत लम्बी है उसपे पांच-छह  हैडिंग है  उसपे आप table of content देते है तो वो पोस्ट यूजर फ्रेंडली बन जाती है।  Table Of Content में दिए गए लिंक पर क्लिक करेगा वो डायरेक्ट उसी हेडींग पर पहुंच जायेगा और उसे रीड करने लगेगा जैसे की मैंने इस पोस्ट पर Table Of Content लगाया हुआ है तो आप उस पर क्लिक करोगे तो सीधे उस हैडिंग पर पहुंच जाओगे वैसे तो आपको वर्डप्रेस में आपको Table Of Content के काफी सारे प्लगिन्स मिल जाते है लेकिन आप सभी जानते है की ब्लॉगर के लिए कोई प्लगिन्स होता है इसमें सिर्फ कोडिंग होती है लेकिन आज में आपको बताऊंगा की वो कोनसी कोडिंग है जिससे आप अपने ब्लॉग पोस्ट में Table Of Content को लगा पाएंगे। ये सब कैसे होगा इसके लिए आप आर्टिकल को अंत तक पड़ियेगा।

How to add an automatic table of contents in blogger post in Hindi 2020

    ब्लॉगर में Table Of Content कैसे add करे ?

    सबसे पहले आप अपने ब्लॉगर के Dashboard पर जाये उसके बाद Theme सेक्शन पर क्लिक करे उसके बाद Edit HTML पर क्लिक करे।

    <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>
    फिर आपको Ctrl+F press करना है इसके बाद search bar </head> पेस्ट करना है और enter press करना है उसके बाद आपको ऊपर दिया गया कोड </head> के ठीक ऊपर पेस्ट करना है।

    उसके बाद आपको  ]]></b:skin> कॉपी करना है और Ctrl+F press और search bar में जाकर पेस्ट कर enter करना है उसके बाद आपको निचे दिए गए कोड को कॉपी करके ]]></b:skin> इस कोड के ठीक ऊपर पेस्ट करना है। 

    .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;}
    <data:post.body/> इस कोड को कॉपी करो Ctrl+F press करके search bar में पेस्ट कर दीजिये 
    उसके बाद आपको जहां-जहां ये कोड दिखे आपको <div id=”post-toc”><data:post.body/></div>  इस कोड के साथ ये रीप्लेस करना है। इतना काम करने के बाद आपको सेव थीम पर क्लिक करना है। अब बात करे ये Table Of Content Show कैसे होगी तो इसे जानने के बढ़ते है अगली स्टेप पर की How to add an automatic table of contents in blogger post. 

    Table Of Content को पोस्ट में कैसे लगाए ? 

    How to add an automatic table of contents in blogger post in Hindi


    अब आपको अपने ब्लॉगर के डैशबोर्ड पर जाना है और पोस्ट पर क्लिक करना है और आपके जितने भी पोस्ट है आपको उन्हें एक के बाद एक करके निचे दिए गए कोड दो कोड्स को प्लेस करना है। आपको Edit पर क्लिक करना है आपको साइड में compose और HTML के दो tab नज़र आएंगे आपको HTML पर क्लिक करना है उसके बाद आपने जहां भी Heading डाला होगा उसके ऊपर ही आपको दो HTML ब्रैकेट टाइप <br/> <br/> को कॉपी करके heading के ऊपर पेस्ट कर देने है आप देख रहे होंगे की दोनों ब्रकेट्स के बीच में जगह है इन दोनों ब्रैकेट्स के बीच में हे निचे दिया कोड कॉपी कर पेस्ट कर देना है। 


    <div class=”mbtTOC”>
       <button onclick=”mbtToggle()”>Table Of Contents</button>
       <ul id=”mbtTOC”></ul>
       </div>
    How to add an automatic table of contents in blogger post in Hindi



    पेस्ट करने के बाद आपको सबसे आखिर में आपको </div> कोड मिलेगा आपको इस कोड से पहले आपको <script>mbtTOC();</script> इस कोड को पेस्ट करना है उसके बाद अपडेट पर क्लिक करना है, जब आप अपने ब्लॉग को रिफ्रेश करोगे तो आपको Table Of Content दिखाई देगा। जैसे की आप निचे इमेज पर देख पा रहे होंगे। 


    अगर आपको Table of Content में कुछ बदलाव करना हो जैसेकि आपको कलर चेंज करना हो, बॉर्डर कलर चेंज करना हो या आपको साइज छोटा बड़ा करना हो तो फिर आपको कुछ स्टेप्स और फॉलो करने होंगे। 

    Table Of Content का Color and Size Change कैसे करे?

    • Change background color #FFFFEO
    • Change border color #f7f0b8
    • Change font color #707037
    • Change Anchor link color #0080FF
    • Change the font size of anchor Links 15px
    • Change the font size of TOC heading text 20px
    आप इन कलर कोड्स को देख रहे होंगे आपको करना क्या है आपको Ctrl+F press करना है उसके बाद आपको दिए गए कोड्स को सर्च करना है जब आपको ये कोड्स मिल जाये उसके बाद आपको गूगल पर HTML Color search करना है फिर आपको काफी सारे रिजल्ट्स मिल जायेंगे। आपको इनमे से किसी लिंक पर क्लिक करके आपको अपने पसंद के कलर के कोड के साथ रेप्लस कर देना है। लेकिन आप थीम्स में इन कलर्स कोड्स को ढूंढोगे कैसे, सिंपल आपको ]]></b:skin>  इस कोड को कॉपी करना है , आपको Theme पर क्लिक करना है उसके बाद आपको Edit HTML पर क्लिक करना है फिर Ctrl +F press करिये उसके बाद आपको इस कोड को search bar में पेस्ट कर enter press करना है आपको इस कोड के ऊपर ही ये कलर और resize कोड्स मिल जायेगे आपको अपने पसंद के कलर कोड के साथ replace कर दो। 

    निष्कर्ष 

    अगर आपको मेरे द्वारा दी गयी Table Of Content के बारे में जानकारी पसंद आयी हो तो आप मुझे कमेंट करके जरूर बताना क्युकी भाई एक आर्टिकल लिखने में वक़्त लगता है लेकीन anyways में आपको जरुरी बात बताना तो भूल ही गया आप जब भी अपनी ब्लॉगर की थीम चेंज करते है तो आपको ये सेटिंग्स दोबारा करनी होगी अगर आप ये सेटिंग्स को दोबारा नहीं करेंगे तो Table Of content काम नहीं करेगी। अगर आपको ये आर्टिकल समझ नहीं आया हो तो में निचे वीडियो का लिंक दे दूंगा जिससे आपको और भी आसानी होगी। 

    जय हिंद वंदे मातरम 

    By user

    3 thoughts on “How to add an automatic table of contents in blogger post in Hindi [2020]”

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Close Bitnami banner