अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे ? यदि आप भी एक blogger है और आपका ब्लॉग Blogspot पर है, तो ये पोस्ट आपके लिए बोहोत ही ज्यादा महत्वपूर्ण है क्योंकि आज की पोस्ट में हम आपको Table of Contents से जुड़ी सारी जानकारी जैसे की Blogger me table of Contents kaise add kre, Table of contents क्या होता है, Table of contents के features और फायदों के बारे में बात करेंगे।
इसके साथ साथ हम ये भी जानेगे की हमे अपने ब्लॉग में Table of Contents क्यों Add करना चाहिए, इसका प्रयोग करने से क्या हमारे ब्लॉग की रैंकिंग में फर्क परता है या हमारे Articles SEO friendly बनते है। इन सारे सवालो के जावाब आज हम आप सभी को बोहोत ही आसान शब्दों में देने वाले है।
अगर आप blogger का इस्तेमाल करते है तो आप भी इस चीज़ से अच्छी तरह से वाकिफ़ होंगे की हमे ब्लॉगर पर Wordpress जितने options और features नही मिलते। जो काम हम Wordpress पर plug-ins की मदद से मिनटों में कर लेते है वही काम हमे Blogger पर करने में काफी ज्यादा वक़्त लग जाता है।
Wordpress पर बोहोत सारे Plugins उपलब्ध है, जिसकी मदद से हम एक Click में ही अपना बोहोत सारा Task कर सकते है वही दूसरी जगह blogger पर हमे छोटी सी चीज़ करने के लिए भी coding की सहायता लेनी पड़ती है। पर यही छोटी छोटी चीज़े ही हमे काफी कुछ सिखा जाती है।
तो चलिए दोस्तों जानते है की Table of contents क्या होता है और ये हमारे ब्लॉग के लिए क्यों जरूरी है।
Contents
Toc क्या है - What is Table of Contents
Toc के Features
अब में आपको Table of Content के कुछ features के बारे में बताने वाला हूँ
- यह आपके ब्लॉग को एक Professional look देता है
- इससे आपके ब्लॉग की SEO अच्छी होती है
- चुकी हमारे दिए गये कोड में सिर्फ html और css का इस्तेमाल हुआ है जिसके कारण आपके ब्लॉग की स्पीड में कोई भी गिरावट नही आती
- इसे आप अपने ब्लॉग में जहाँ चाहे वहाँ लगा सकते है
- ये पूरी तरह से Mobile friendly है
- Expand and Contract Button का इस्तेमाल कर सकते है
- Direct Jump to the Topic- इससे user सीधा उस टॉपिक पर redirect हो जायेंगे जिसे वो पढना चाहते है
Toc के फायदे
आपने जब भी Google पर कुछ Search किया होगा तो अपने ये जरुर देखा होगा की सर्च रिजल्ट्स में Wikipedia की वेबसाइट बोहोत बार आई होगी। Wikipedia अपने सारे पोस्ट में Table of contents का उपयोग करता है, ये इस बात का प्रमाण है की इसकी कितनी एहमियत होती है तो चलिए जानते है Table of Contents के कुछ फायदों के बारे में हमारे ब्लॉग पोस्ट में चार चाँद लगा देते है।
- सबसे पहले तो ये आपके ब्लॉग की Ranking के लिए बोहोत ही फायदेमंद है। इससे आपका ब्लॉग जल्दी Index होता है नतीजन Ranking भी fast होती है।
- यह आपका पोस्ट के SEO में हेल्प करता है जिससे की आपका ब्लॉग और भी ज्यादा यूजर फ्रेंडली और सर्च इंजन फ्रेंडली होता है जिसके कारण आपके ब्लॉग के ट्रैफिक भी Increase होती है
- Users के लिए एक लम्बा आर्टिकल पढना बोहोत ही बोरियत वाला काम होता है, ऐसे में users directly उस टॉपिक के बारे में पढ़ सकते है जिसके लिए वे आपके ब्लॉग पर आए हैं
- यह आपके ब्लॉग की Navigation को भी improve करता है.
- इसके साफ़ और सुथरे डिजाईन और structure से आपके ब्लॉग में एक प्रोफेशनल वाली फीलिंग आती है
- इसके Heading और Sub-Heading भी गूगल में रैंक करते है
- सबसे जरूरी इसके सहायता से users को एक अच्छा experience मिलता है जिसके कारण users आपके ब्लॉग को याद रख पाते है और दुबारा लोट कर भी आते है
अपने ब्लॉग पोस्ट में Table of Contents कैसे Add करे
Automatic Toc kaise Add kre
अपने ब्लॉगर ब्लॉग में Automatic Table of Contents Add करने के लिए इन steps को follow करे
- सबसे पहले अपने ब्लॉगर account में login करे फिर अपने ब्लॉग के dashboard से Theme option में जाये और Edit HTML पर click करे (अपने theme का backup लेना न भूले )
- उसके बाद अपने html कोड में CTRL + F दबाकर </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[ //*************TOC plugin by Shirasta.in function mbtTOC() {var mbtTOC=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);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>
- अब आप एक बार फिर से CTRL + F दबाये और ]]</b:skin> search करे और इसके ठीक उपर नीचे दिए गए code को copy कर के paste कर दे ।
.mbtTOC{ 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%; } .mbtTOC ol,.mbtTOC ul { margin:0; padding:0; } .mbtTOC ul { list-style:none; } .mbtTOC ol li,.mbtTOC ul li { padding:15px 0 0; margin:0 0 0 30px; font-size:15px; } .mbtTOC a{ color:#0080ff; text-decoration:none; } .mbtTOC a:hover{ text-decoration:underline; } .mbtTOC 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; } .mbtTOC button:after{ content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px; }
<div id="post-toc"><data:post.body/></div>
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>
<script>mbtTOC();</script>
Manually Table of Contents कैसे Add करे
- अपने ब्लॉगर ब्लॉग में login करे तथा theme के option में जाकर Edit HTML पर click करे
- फिर CTRL + F दबा कर ]]</b:skin/> सर्च करे और इसके ठीक उपर नीचे दिए गए कोड को copy कर के paste कर दे ।
/* Table of Contents by shirasta.in */ .toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;} .toc h2 {display:inline-block; margin-right:10px} .toc a {text-decoration:none} .toc a:hover {text-decoration:underline} .toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left} .toc ul li {list-style-type:none;} .toc ul li a {margin-left:.5em} .toc ul li ul {margin-left:2em} .toctogglelabel {cursor:pointer; color:#0645ad} :not(:checked) > .toctoggle {display:inline !important; position:absolute; opacity:0} :not(:checked) > .toctogglespan:before {content:'['} .toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'Contract';display: inline} .toctoggle:checked + .toctitle .toctogglelabel:after {content:'Expand'} :not(:checked) > .toctogglespan:after {content:']'} .toctoggle:checked ~ ul{display:none} :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
- अब अपने theme को save कर दे
<div class="toc"> <input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"><h2>Contents</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span></div> <ul> <li>1 <a href="#toc1" title="First Heading">First Heading</a></li> <li>2 <a href="#toc2" title="Second Heading">Second Heading</a></li> <li>3 <a href="#toc3" title="Third Heading">Third Heading</a></li> <li>4 <a href="#toc4" title="Fourth Heading">Fourth Heading</a></li> <li>5 <a href="#toc5" title="Fifth Heading">Fifth Heading</a> <ul> <li>5.1 <a href="#toc5_1" title="First sub heading">First sub heading</a></li> <li>5.2 <a href="#toc5_2" title="Second sub heading">Second sub heading</a></li> </ul> </li> <li>6 <a href="#toc6" title="Sixth Heading"">Sixth Heading"</a></li> </ul> </div>
Conclusion
मेरा देश! मेरा गर्व! मेरा कर्तव्य!
3 टिप्पणियां
aapka theme kon sa hai
जवाब देंहटाएंFiksioner by Igniel
हटाएंbahut accha article likha hai aapne. Thanks sir for sharing good information with us
जवाब देंहटाएं