अपने ब्लॉग में Table of Contents कैसे Add करे || BLOG || जानिये हिंदी में

यहाँ आपलोगों को हम बतलाने वाले हैं की कैसे आप अपने ब्लॉग पर Table of Contents जोड़ सकते हैं जिससे की आपके साईट के user को आपका कंटेंट्स पढने में बहुत ही आसानी हो | यहाँ आपको ये सारी बातें बहुत ही सरल भाषा में समझाया जाएगा जिससे की अगर आप ब्लॉग में नए भी हो तो भी आप हमारा post पढ़कर ये काम आप बहुत ही आसानी से कर सकते हैं |

आप यहा ही थोडा नीचे देखिये मैंने भी अपने ब्लॉग पर Table of Contents जोड़ा है जिससे की आपको और आने वाले सभी user को हमारा post पढने में आसानी लग सके , तो आइये जानते हैं 👇👇

ब्लॉग में Table of Contents क्या होता है ?

आप हमारे इस post को पढ़ रहे है तो आपको ऊपर में एक फोटो के नीचे आपको जरुर Table of Contents मिला होगा या अगर आपने ध्यान नहीं दिया तो आप फिर से हल्का ऊपर जाकर देख सकते हैं , इसी को Table of Contents कहते हैं |

अगर आप किसी दुसरे साईट पर विजिट करते होंगे तो वहां भी ऊपर में Table of Contents आपको दिखा होगा , इन्ही को Table of Contents कहा जाता है |

Must read : अपने ब्लॉग में Stylish Table of Contents कैसे जोड़े

ब्लॉग में Table of Contents के क्या कार्य हैं ?

• ब्लॉग में Table of Contents का छोटा ही लेकिन बहुत महत्वपूर्ण कार्य है |

• आप जब Table of Contents पर क्लिक करते होंगे या अगर ऐसे ही हेडिंग दिख रहा है तो आप उस पर क्लिक करते होंगे तो आप डायरेक्ट उस हेडिंग पर आ जाते हैं पढने के लिए |

• यानी की Table of Contents पर क्लिक कर आपको जो हेडिंग पढनी है , उस पर आप डायरेक्ट जा सकते हैं |

• कहा जा सकता है की Table of Contents एक तरह से shortcut रास्ता है जिसपर क्लिक कर आप उस post में अपने मन पसंदित हैडिंग को पढ़ सकते हैं |

अगर आपने ऐसा कर के नहीं देखा है तो आप यहाँ सबसे ऊपर में धीरे धीरे जाए , आपको Table of Contents जरुर मिलेगा और उसमें जो हैडिंग दिया गया है उसपर क्लिक करोगे तो आप डायरेक्ट उस हैडिंग पर ही चले जाओगे |

अपने ब्लॉग में Table of Contents कैसे जोड़े ?

1. सबसे पहले आप अपने blogger या WordPress को open कर ले |

2. अब आप Theme पर जाए |

अब आप अपने ब्लॉग का HTML बैकअप जरुर ले क्युकी अगर आपको कोडिंग करते वक़्त कोई गड़बड़ी हो जाती है तो आप फिर से अपने बैकअप का इस्तेमाल करके उसे पहले जैसा कर सकते हैं |

3. अब Theme में आने के बाद Edit HTML में जाए |

Must read : अपने ब्लॉग में Stylish Table of Contents कैसे जोड़े

4. अब यहाँ आप कही भी क्लिक कर Ctrl+F बटन दबाये जिससे की search करने वाली जगह आपको दिखने लगेगी |

5. अब आप search करने वाली जगह में </head> को यहाँ से copy कर वहां paste करना है और search करना है |

6. अब आपको </head> के जस्ट ऊपर नीचे दिया गया HTML Code को copy कर paste करना है |

1. 👇HTML CODE👇

<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 infoshashikant.com function avsTOC() {var avsTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[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>

7. अब आप search करने वाली जगह में ]]></b:skin> को यहाँ से copy कर वहां paste करना है और search करना है |

8. अब आपको ]]></b:skin> के जस्ट ऊपर नीचे दिया गया HTML Code को copy कर paste करना है |

2. 👇HTML CODE👇

.avsTOC{border:1px solid #999999; box-shadow:0px 0px 0 #EDE396; background-color:#f3f3f3; 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:#6fa8dc;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;}

9. अब आप search करने वाली जगह में <data:post.body/> को यहाँ से copy कर वहां paste करना है और search करना है |

10. अब आप <data:post.body/> इसके स्थान पर नीचे दिए गए HTML CODE को replace करें |

3. 👇HTML CODE👇

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

11. अब इतना करने के बाद आपको अपने HTML को सेव कर देना है |

नोट :---  आपको ऊपर दिए गए 1, 2, 3 वाले HTML Code को अपने ब्लॉग के theme में सिर्फ एक बार ही सेव करना है |

12. अब आपको अपने आर्टिकल में जहाँ भी Table of Content लगाना है वहां पर 123 लिख दे |

13. अब ऊपर बाए तरफ दिए गए पेंसिल के चित्र पर क्लिक कर HTML View पर क्लिक करें |

14. अब ऊपर search करने वाले जगह पर 123 लिखकर search करे वो highlight हो जाएगा और उसके जगह पर नीचे दिए गए HTML Code को paste कर दे यानी की replace कर दे |

4. 👇HTML CODE👇

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

15. अब आप सबसे नीचे में नीचे दिए गए HTML Code को paste कर दे |

5. 👇HTML CODE👇

<script>avsTOC();</script></div>

इस तरह से आपके ब्लॉग में Table of Contents जुट जाएगा |

नोट :----  4, 5 वाले HTML Code को अपने आर्टिकल में हमेशा लगाना है , जिस तरह से ऊपर बताया गया है |

Must read : अपने ब्लॉग में Stylish Table of Contents कैसे जोड़े

अपने ब्लॉग में Table of Contents जोड़ने से संबंधित कुछ जरुरी बातें

• आपको ऊपर दिए गए 1, 2, 3 वाले HTML Code को अपने ब्लॉग के theme में सिर्फ एक बार ही सेव करना है |

• जबकि 4, 5 वाले HTML Code को अपने आर्टिकल में हमेशा लगाना है , जिस तरह से ऊपर बताया गया है |

• याद रखे Table of Contents में सिर्फ आपके Sub-heading ही आते हैं , इसलिए जिस जिस को आपको Table of Contents में दिखाना है उसे आप Sub-heading बना दे |

• 5 वाले HTML Code को अपने आर्टिकल में हमेशा HTML view में जाकर सबसे नीचे ही paste करना है |

निष्कर्ष

यहाँ दी गयी जानकरी आपको कैसी लगी नीचे कमेंट बॉक्स में जरुर बताये और अगर आपको अपने ब्लॉग में Table of Contents जोड़ने में समस्या आ रही है या काम नहीं कर रहा है तो आप कमेंट बॉक्स में जरुर बताये |

इस जानकारी को अपने सभी दोस्तों के पास शेयर जरुर करें ताकि उनको भी इसके बारे में जानकारी प्राप्त हो सके |

Must read : अपने ब्लॉग में Stylish Table of Contents कैसे जोड़े