How To Create WordPress Like Table Of Content In Blogger (After First Paragraph) in hindi

How To Create WordPress Like Table Of Content In Blogger (After First Paragraph) in Hindi : हमने javascript और css3  के लिए Table Of Content बनाया है बिलकुल ब्लोगगेरो के लिए । खास कर उंकेय लिए जो लंबे लंबे आर्टिकल लिखते है वो इसको जरूर इस्तेमाल करे ।

# blogger आप इसे इस्तेमाल करके अपने ब्लॉग को रेंक करा सकते है

#Tips TOC PLUGIN V2.0 के लिए आपको अपने थीम्स  एडिट करने की  जानकारी होनी चाहिए  ।

#warning पहले आप अपने ब्लॉग थीम्स को एडिट करने से पहले उसे बैकप कर के सेव कर ले क्यूंकी ये हो सकता है की इसको आपके ब्लॉग का थीम्स स्वीकार ना कर पाये ।

How To Create WordPress Like Table Of Content In Blogger (After First Paragraph) in Hindi

#why use TOC

 वेबमास्टर्स और ब्लॉगर्स के लिए जो लंबे लेख लिखते हैं और लेख को कई उप-वर्गों में विभाजित करते हैं, पाठकों को दोस्ताना नेविगेशन के बिना ऐसी लंबी पोस्ट पढ़ने में मुश्किल हो सकती है। 

• log in to the webmaster
• go to Wikipedia

बेहतर वर्तमान लंबे, लंबे लेखों का एकमात्र समाधान 'सामग्री की तालिका' प्रदर्शित कर रहा है। इसे wekipedia इस्तेमाल करता है अपने लंबे पोस्ट मे ।

#TOC Plugin SEO Friendly

  एक TOC आपके लिखावट के बारे में सभी के बारे में सर्च इंजन के लिए एक बुनियादी सारांश देता है। एक टीओसी के अंदर एंकर लिंक आपके SEO प्रयासों में एक अतिरिक्त लाभ प्रदान करता है।

और यह google मे बेहतर नेविगेशन और समझ प्रदान करते हैं।

source:- www.mybloggertricks.com

Features of TOC Plugin 

• javascript कोड
• बेहतर हेयडिंग टेग
• नंबर के साथ नैविगेशन
• बहतर खोजने के तकनीक H1 से H6 तक
• अपके कंटैंट मे खुद से एक युनीक id बनाने के छमता
• हर लिंक के साथ एक anchor लिंक की छमता
• ये एक या बहुत सारे लिस्ट बनाने का छमता रखता है
• दिखने और छुपने का ऑप्शन
• हल्का और तेज
• SEO के लिए तैयार
• आसानी से डिज़ाइन भी कर सकते है एडिट करके
• मोबाइल friendly

#Installation Guide

NOTE:-  किसी भी मंच पर TOC प्लगइन आसानी से स्थापित किया जा सकता है। चाहे वह एक WordPress साइट, ब्लॉगस्पॉट ब्लॉग या एक साधारण HTML पृष्ठ है। स्थापना मार्गदर्शिका में तीन मुख्य चरण होते हैं।

1. ब्लॉगर> टेम्पलेट में साइन इन करें
2. अपने टेम्पलेट का बैकअप कर लें
3. क्लिक edit html
4. बस के ऊपर टैग निम्न स्रोत लिंक पेस्ट करें

नेचे दिये हुये कोड को अपने तम्प्लटेस मे एडिटे करके </head> के उपर paste कर दे ।

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

नीचे दिये कोड को आपको अपने तम्प्लटेस एडिट मे ]]</ b:skin> को सर्च करके उसके उपर paste करदे

/*####TOC Plugin V2.0 by MyBloggerTricks####*/ .mbtTOC2{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%;}.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; text-transform:capitalize;} .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} .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} */

NOTE :- अपने तम्प्लटेस को पहले बैकप कर ले इसमे आपके थीम्स की भलाई है अगर कुछ गड़बड़ी भी हुवी इस wedgit को लगाने मे तो आप उसे फिर से लगा सकते है ।

अगर आप TOC का रंग बदलना चाहते है उसके बैक्ग्राउण्ड का तो आप यह से ये कोड ले और एडिट कर ले

#FFFFE0, #f7f0b8, #707037, #0080ff, #289728

 लास्ट स्टेप आपको अपने थीम्स मे जाकर <data:post.body/> ये कोड को खोजे और और तीसरे कोड तक सब के जगह पर इसको हटाकर नीचे दिये हुवे कोड को उसके जगह पर डाल दे ।

<data:post .body=""></data:post></div>

NOTE:- कम से कम दो जगह डाले नहीं तो टॉक नहीं वर्क करेगा ।

#FINAL STEP:- अब आप जब पोस्ट लिखेंगे तो आपको पहले ये करना है ।

कोड 1 

<div class="mbtTOC2"> <button onclick="mbtToggle2()">Contents</button> <ol id="mbtTOC"></ol> </div>

लास्ट कोड 2

<script>mbtTOC2();</script>

CREDIT:  www.mybloggertricks.com

ADVANTAGES 

ये टूल्स आपको google मे जल्दी रेंक करेगा और आपके पोस्ट को पढ़ने मे आसानी देगा अगर आप लंबा आर्टिकल लिखते है तो आपको इसका इस्तेमाल जरूर करना चाहिए wekipidia इसको इस्तेमाल करता है ।

ये बहुत सारे tamaplates मे अभी भी काम नहीं करता है जैसे की blogger hero की tamplates जिसको मे खुद इस्तेमाल करता हूँ ।

WARNING

आपको अपने पोस्ट मे ज्यादा H2 हेयडिंग नहीं देना है नहीं तो google आपके पोस्ट को स्पैम मान लेगा और आपको इंडेक्स नहीं करेगा ।

CANCLUSION

 इसके इस्तेमाल से आप गूगल मे जल्दी रेंक करोगे पर आपको थोड़ा मेहनत भी करना होगा जिससे आप लंबा आर्टिकल लिखे ।

Why did i write this article

ये आर्टिकल उन लोगो के लिए है जो लोग बड़े बड़े पोस्ट लिखते है और उनके लिए है और मे उन्हे ये आर्टिकल समर्पित करता हूँ ।

Read more from my blog

• Blogspot SEO Tips And Tutorial: Make Blogger SEO Friendly in Hindi
• How to Index New Post Quickly In Google In 1 Minute
• top best SEO optimized Adsense ready blogger templates themes ब्लॉग्स्पॉट के लिए ।