Blogger Post में "Table Of Contents" [TOC] कैसे बनाते हैं ?
Table of contents होने से मुख्य headings highlight हो जाती है जिससे visitors अपने मतलब का जो भी पढ़ना चाहता है उसे click करके direct पढ़ सकता है।
"Table Of Contents" [TOC] होता हैं ?
Table of Contents (TOC) क्यों लगाते है ?
आप अगर विकिपीडिया के वेबसाइट पर कभी गए होंगे तो जरूर देखा होगा की सभी बड़े व लम्बे Article पे एक विवरणिका box बना होता है , जिसपे आप click करके किसी भी heading पर जा सकते है।
१- टेबल ऑफ़ कंटेंट्स बनाने से रीडर को आपकी पोस्ट पढ़ने में आसानी होती हे, जिससे SEO में कभी मदद मिलती है।
२- Google का Search Engine आपके blog post के अलावा heading और subheading को भी Rank करता है, जिसे traffic बढ़ने के chance बढ़ जाता है।
३- आपका content कभी Attractive हो जाता है।
४- Visitors को आपके post पढ़ने में सुबिधा हो जाती है।
Blog Post में Table of Contents (TOC) Add कैसे करते हैं ?
तो आईये हम जानते है की अपने ब्लॉग पोस्ट में toc कैसे जोड़ते है; बिलकुल आसान तरीके से।
आप निचे दिए गए निर्देशों को बहुत ही ध्यान पूर्वक से follow करे।
पहला चरण :
- अपने Blogger Account में Sign In हो जाये।
- Theme option को क्लिक करिये।
- सबसे पहले आप Template का Backup लें कर रख लीजिये , यदि किसी भी प्रकार की कोई गड़बड़ी भी अगर होती है, तो आप दुबारा से अपने Template को Re-Upload कर सकेंगे।
- "Edit HTML" पर क्लिक करे।
- अब इस Edit HTML Section में कहीं भी क्लिक करके Ctrl + F बटन press करे, आपको एक [Search Box] दिखेगा, यहाँ पर आप Type करे </head> फिर Enter बटन press करें।
- </head> closing tag के बिलकुल ऊपर निचे दिए गए Code को Copy करे और Paste करें।
Code For Past in </head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <script type='text/javascript'> //<![CDATA[ //*************TOC Plugin V1.0 by www.pkvtechnical.com 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> |
2nd step:
उसके बाद आपको theme के html Search Box में ]]></b:skin> Find करना है। और फिर निचे दिए गए Code को copy करे और ]]></b:skin> के ठीक ऊपर paste कर देंना है।
/*####TOC Plugin V1.0 by pkvtechnical.com/####*/ .mbtTOC2{border:1px solid; ##f7f0b8;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px; font-family:Oswald, arial;display: block;width: 80%;} .mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;padding:0 0 0 15px;} .mbtTOC2 button a {color:#0080ff; 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:#0080ff; text-decoration:none; font-size:18px;} .mbtTOC2 li a:hover {text-decoration: underline;} .mbtTOC2 li li {margin:4px 0px;} .mbtTOC2 li li a{ color:#289728; font-size:15px;} .mbtTOC2 ol{counter-reset:section1;list-style:none} .mbtTOC2 ol ol{counter-reset:section2} .mbtTOC2 ol ol ol{counter-reset:section3;margin: 10px 0px;} .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} |
<data:post.body/> अंत में इस code को find करें और इस code से replace कर देना है
<div id="post-toc"><data:post.body/></div> अगर <data:post.body/>
यह code एक से अधिक बार है तो सबको ही बारी-बारी से replace करदेना है। और save theme पे click करना है।
दूसरा चरण :
1st Step:
आप अपने blog Post के HTML view पर जाये और जहाँ भी Table Of Contents लगाना चाहते है वहाँ पर निचे दिए गए Code को Copy paste कर देना है। ज्यादा तर Bloggers पोस्ट के पहले heading के ठीक ऊपर लगाना पसंद करते है , ताकि आपके Readers post के शुरुआत में ही जान जाए की यह पोस्ट उनकी मतलब की है या नहीं।
<div class="mbtTOC2"> <button>Table of Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>] </span></button> <div id="mbtTOC2"></div> </div> |
2nd Step:
<script>mbtTOC2();</script> |
Final Line :
इस प्रकार से आपका "Table Of Contents" लगाने का काम ख़त्म होता है , आपको पहले चरण में जो कोड दिए गए है वे सिर्फ एक ही बार लगनी है बाकी दूसरे चरण में जो कोड दिए गए है उसे प्र्तेक post में जिसमे आप चाहे लगाना होगा।
No comments:
Post a Comment