अपने ब्लॉग में Stylish Table of Contents कैसे जोड़े || BLOGGER || In Hindi

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

मैंने एक और post लिखा है जिसमें मैंने सिम्पल Table of Contents ब्लॉग में लगाने का तरीका बताया है और यहाँ हम आपको कुछ अलग यानी की स्टाइलिश Table of Contents लगाने का तरीका बतलाने वाले हैं तो आइये इसके बारे में नीचे जानते हैं 👇👇

ब्लॉग में स्टाइलिश Table of Contents क्या है ?

ब्लॉग में स्टाइलिश Table of Contents भी simple Table of Contents के जैसा ही है काम करता है परन्तु यह थोडा देखने में और सुन्दर लगता है , इसीलिए इसे स्टाइलिश Table of Contents कहा जाता है |

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

Must read : अपने ब्लॉग में Table of Contents कैसे Add करे

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

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

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

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

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

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

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

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

1. 👇HTML CODE👇

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TOC Plugin V2.0 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>

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

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

2. 👇HTML CODE👇

/*####TOC Plugin V2.0*/ .mbtTOC2{ border:5px solid #0008FC ; border-radius: 10px 50px 10px 50px; box-shadow:5px 5px 5px 5px grey; border-style:dashed; background-color:#ACDEFB; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:Oswald, arial; display: block;width: 70%; } .mbtTOC2 button{ background:#ACDEFB; font-family:oswald, arial; font-size:22px; position:relative; outline:none; border:none; color:#2E2E2E; padding:0 0 0 15px; } .mbtTOC2 button a { color:#FF0313; 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:#EA1414; text-decoration:none; font-size:18px; text-transform:capitalize; } .mbtTOC2 li a:hover { text-decoration: underline; } .mbtTOC2 li li {margin:14px 0px;} .mbtTOC2 li li a{ color:#040404; font-size:15px; } .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3} .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} /* .point2 {list-style-type:lower-alpha} .point3 {list-style-type:lower-roman} .point4 {list-style-type:disc} */

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 में सिर्फ एक बार ही सेव करना है |

Must read : अपने ब्लॉग में Table of Contents कैसे Add करे

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

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

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

4. 👇HTML CODE👇

<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div>

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

5. 👇HTML CODE👇

<script>mbtTOC2();</script>

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

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

निष्कर्ष

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

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

Must read : अपने ब्लॉग में Table of Contents कैसे Add करे