-->

नमस्कार दोस्तो,आज मैं आपको इस आर्टिक्ल में Table Of Content कैसे Add करते है यानि, ब्लॉगर में पोस्ट क्रिएट करते समय टेबल ऑफ कोंटेंट कैसे Add करते है इसके बारे में बताऊंगा अगर आप जानना चाहते है तो इस आर्टिक्ल को अंत तक पढे आपको पूरी जानकारी Step By Step विस्तार पूर्वक मिल जाएगी

अगर आपको हमारे द्वारा यह ट्रिक पसंद आती है यानि हमारा यह आर्टिक्ल पसंद आता है तो इस आर्टिक्ल को अपने सभी दोस्तो के साथ सोश्ल मीडिया पर जरूर शेर करें 

तो चलिए शुरू करते है...

    Table Of Content कैसे Add करते है ?

    सबसे पहले आप नीचे दिये गए कोड कॉपी करें 

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

    अब अगर आपने उपर दिये Code को कॉपी कर लिया है तो नीचे बताए अनुसार स्टेप को फॉलो करें 

    • अपने ब्लॉगर के dashboard पर जाये 
    • थीम पर क्लिक करें
    • Edit Html पर क्लिक करें 
    • अब अपने ब्लॉगर के थीम में इस टैग को ढूँढे </head> और उपर आपने जो कॉपी किया था उस Code इस Tag के उपर Paste कर दे

    अगर आपने इतना Step Complete कर लिया है तो चलिए अगले Step पर चलते है 

    अब नीचे दिये ग्ये Code को कॉपी करें 

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

    अब आप अपने ब्लॉगर थीम में इस Tag को ढूँढे 

    ]]></b:skin>

    और उपर दिये गए Code को इस Tag के उपर Paste कर दे 

    आपने उपर दिये गए Step को कंप्लीट कर लिया है तो चलिए अब चलते है अगले स्टेप पर...

    अब आप अपने ब्लॉगर के थीम में इस टैग 

    <data:post.body/> 

    को ढूँढे और इस 

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

    Code से बदल दे

    आपको जितनी बार भी यह <data:post.body/>   Code मिले उतनी बार इस <div id="post-toc"><data:post.body/></div> Code से बदल दे 

    अब आपने अपने ब्लॉगर के थीम में जीतने भी Changes करने थे वे सभी कंप्लीट कर लिए है अब आपको Simply जहा भी Table Of Content Show कराना है यानि जिस भी पोस्ट में Table शो करनी है उस आर्टिक्ल में नीचे दिये गए Code को paste कर दे

    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Table Of Contents</button> 
        <ul id="mbtTOC"></ul>  
    </div>

    अब इस Code 

    <script>mbtTOC();</script>

    को पोस्ट के अंत में Add करें

    बधाई हो आपने अपने ब्लॉगर पोस्ट में Table Of Content कैसे Add करते है सीख लिया है अब आप अपने आर्टिक्ल पर Visit कर सकते है आपको वहा पर Table Show होगी

    Table Of Content अपने हिसाब से Customize कैसे करें ?

    अगर आप Table Of Content को अपने हिसाब से Customize करना चाहते है तो आप नीचे दिये Code व इन्सट्रक्शन से कर सकते है आपको नीचे Table Of Content को customize करने के लिए Color Code दिये गए है जिनहे आप अपने Theme के According 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

    निष्कर्ष

    हमने आज इस आर्टिक्ल में जाना की ब्लॉगर पोस्ट में Table Of Content कैसे Show काराते है हुमें ऊमीद है आपको यह आर्टिक्ल पसंद आया होगा अगर आपको यह पोस्ट पसंद आई तो इस पोस्ट को अपने सोश्ल मीडिया अकाउंट पर जरूर शेयर करें चलिये हम आपसे मिलते है अगले किसी नए आर्टिक्ल में जब तक आपका हर काम मागलमय हो....जय हिन्द !

    Post a Comment

    Previous Post Next Post