Table of Contents for Blogger in Hindi | TOC in Blogger

byAdmin •
0
दोस्तों आपको हम इस ब्लॉग पोस्ट मे Hindi में Step by steps बताएंगे की Blogger में Table Of Contents(TOC in Blogger) कैसे लगाते हैं। 

    दोस्तों अगर हम WordPress का इस्तेमाल करते हैं तो Table of Contents Plugin का इस्तेमाल करके अपने ब्लॉग में Table of Contents लगा लेते हैं लेकिन जब बात Blogger की आती है तो हमें Coding की आवश्यकता होती है और बहुत से Bloggers को कोडिंग से बहुत दिक्कत होती है लेकिन इस पोस्ट में एक Beginner Blogger भी टेबल आफ कंटेंट्स अपने ब्लॉगर ब्लॉग में इस पोस्ट के मदद से आसानी से लगा सकते हैं ।


    जब आप अपने Blog में टेबल आफ कंटेंट्स यूज करते हैं तो इससे आपके User को आपका Content Access करने में आसानी होती है और साथ ही साथ Google को भी समझने में आसानी होती है और वह आपके Content को सर्च रिजल्ट  (SERP) में अच्छे से दिखा पाता है।

    Table of Contents क्या हैं?

    किसी Particular Blog Post में जितने भी आप Headings लिखते हैं उन Headings को एक टेबल में लिंक कर देता है और User पूरे Content को संक्षिप्त में देख पाता है और उसे जिस चीज की जरूरत होती है उस Headings पर क्लिक करके Direct वह उस Paragraph पर चला जाता है इसी को हम Table of contents  कहते  हैं।


    Table of contents kya hai

    Table of Contents से Google को भी Paragraph को रैंक करने में आसानी होती है और इससे Blog के ट्रैफिक में भी Improvement देखने को मिलता है। SEO के हिसाब से Table of Contents Add करना एक Blog में बहुत जरूरी होता है।

    Blogger में “Table of Contents” कैसे Add करे

    दोस्तों अभी में आपको सिर्फ Steps को बता रहा हु और उसके बाद आपको सारे Steps को Explain करूँगा, चलिए अब step by step image के साथ टेबल आफ कंटेंट्स Add करना सिखाता हूं।

    Step by step

    1. Go to Blogger Dashboard
    2. Go to Theme Option
    3. Select Edit HTML
    4. Add Code Between <Head> </Head>Section
    5. Add Code Above ]]></b:skin> Section
    6. Replace <data:post.body/> code
    7. Add Code in Post
    8. Add Code End of The Post

    Step 1 – Blogger Dashboard में जाए 

    सबसे पहले अपने ब्लॉगर में लॉगिन करके ब्लॉगर डैशबोर्ड में जाना है।




    Step 2 – Theme Option पर जाए 

    उसके बाद अब आपको Theme Option पर जाना है।






    Step 3 – Select Edit HTML

    उसके बाद आपको Customize के बगल में Dropdown बटन पर क्लिक करना है और Edit html पर क्लिक करना है।






    Step 4 – Add Code Between <Head>  </Head>

    अब आपको नीचे दिया गया कोड <Head>  को सर्च करके उसके नीचे Paste कर देना है।


    <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[
//*************Table of Content (TOC) plugin by happydiwaliquotes.in
function avsTOC() {var avsTOC=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);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>

    Step 5 – Add Code Above   ]]></b:skin>   Code

    अब आपको  ]]></b:skin>  के उपर दिया गया Code Paste कर देना है, Save बटन पर क्लिक करके Code Save कर देना है ।



    .avsTOC{border:5px solid #EE5535;
    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%;}
    .avsTOC ol,.avsTOC ul {margin:0;padding:0;}
    .avsTOC ul {list-style:none;}
    .avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
    margin:0 0 0 30px;font-size:15px;}
    .avsTOC a{color:#EE5535;text-decoration:none;}
    .avsTOC a:hover{text-decoration:underline; }
    .avsTOC 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;}
    .avsTOC button:after{content: "\f0dc";
    font-family:FontAwesome; position:relative;
    left:10px; font-size:20px;}

    Step 6 – Replace  <data:post.body/>  code

    <data:post.body/> code  को नीचे दिए गए Code से Replace कर दीजिए।



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

    Step 7 – Add Code in Post

    अभी आपको अपने Post में Add करना है Table of Contents और जो जगह पे आपको अपना Table of Contents डालना है वही यह आपको Code डालना है।

    <div class="avsTOC"> <button onclick="avsToggle()">Table of Contents</button> <ol id="avsTOC"></ol></div>

    Step 8 – Add Code End of The Post

    अभी आपको एक Code लेके आपको Post के Last में डालना है। और दोस्तों Code निचे दिया गया है।

    <script>avsTOC();</script>

    जरूरी सूचना :

    और हाँ अंत में एक बहुत जरूरी बात बताना चाहूँगा कि जिस Heading को आप Table of Contents में रखना चाहते उसे Heading जरूर बना ले और एक बार जाच कर ले ली Heading है या नहीं । 


    Conclusion

    दोस्तों आपको हमने सारे Steps बताया है जिसके मदद से आप आसानी से अपने Blogger  के Website और Blog में  Table of Contents आसानी से Add कर सकते हो।

    Tags:
    Previous Post Next Post