ब्लॉगर में Table of Contents कैसे लगाएं
हैलो फ्रेंड्स आज हम जानेंगे कि आप अपने ब्लॉगर में Table of Contents कैसे लगा सकते हैं। अगर आप वर्ड प्रेस की तरह आप अपने ब्लॉगर में Table of Contents लगाना चाहते हैं और आपको ये नहीं पता कि Table of Contents कैसे लगाया जाता है। तो हम आपको बताएंगे कि आप अपने ब्लॉगर में दो तरीके से Table of Contents कैसे क्रिएट कर सकते हैं।
इसके लिए हम आपको अपने इस वेबसाइट पर पहला तरीका में 5 HTML कोड प्रोवाइड करेगें उस कोड को अपने ब्लॉगर थीम पर और किसी को अपने ब्लॉग पोस्ट पर Add करने होंगे। और दूसरा तरीका में आपको खुद से बनाना पड़ेगा। दोनों को आप खुद ही बनाएंगे लेकिन इस ट्रिक्स को फॉलो कर के। तो चलिए शुरू करते हैं।
Table of Contents
पहला तरीका
ब्लॉग पोस्ट में Automatic Table of Contents कैसे लगाएं
सबसे पहले आप अपने ब्लॉगर थीम का बैकअप कर लें क्योंकि अगर बाद में कोई दिक्कत आ गई तो आप फिर से अपने ब्लॉगर थीम को रिस्टोर कर सकते हैं।
किसी भी कोड को कॉपी करने के लिए Copy Button को टच करें।
Step:1
इस कोड को कॉपी करें और अपने ब्लॉगर थीम पर <head> सेक्शन के नीचे पेस्ट करना है।
HTML
<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>इस कोड ]]></b:skin> को अपने ब्लॉगर थीम में जाकर सर्च करके देख लें, कि कितने नंबर पर है। और उसके बाद नीचे दिए गए कोड को कॉपी करें और अपने ब्लॉगर थीम पर ]]></b:skin> के जस्ट ऊपर में पेस्ट कर देना है।
HTML
/*####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}
*/
Step:3
पहले आप अपने ब्लॉगर थीम पर जाएं और इस कोड <data:post.body/> को सर्च कर लें और देख लें कि कितने नंबर पर है। और नीचे दिए गए कोड को कॉपी कर लें और अपने ब्लॉगर थीम में जाकर इस कोड की जगह नीचे वाली कोड को वहां पर पेस्ट कर देना है। यानि कि Replace कर देना है।
HTML
<div id="post-toc"><data:post.body/></div>
Step:4
नीचे दिए गए कोड को कॉपी कर लेना है और उस कोड को आप अपने ब्लॉग पोस्ट में पेस्ट कर देना है। और जिस जगह पर Table of Contents लगाना चाहते हैं उस जगह पर इस कोड को डालना होगा।
HTML
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
Step:5
इस कोड को कॉपी करें और अपने ब्लॉग पोस्ट के लास्ट में पेस्ट करें।
HTML
<script>mbtTOC2();</script>
पहला तरीका में अब आपका का काम पूरा हो गया। अगर आप इस ट्रिक्स को सही तरीके से फॉलो किए होंगे। तो आपका Table of Contents बन कर तैयार हो गया होगा।
दूसरा तरीका
बिना किसी HTML कोड का Table of Contents कैसे लगाएं
Step:1
सबसे पहले आप अपने ब्लॉग पोस्ट का सारे (सब हेडिंग) को विस्तार से एक नोटपैड ऐप पर लिख लेना है। या फिर आप डायरेक्ट उसी जगह पर भी लिख सकते हैं। जहां पर आप Table of Contents लगाना चाहते हैं। या फिर आप (मेन हेडिंग) के नीचे भी लिख सकते हैं।
Example:
Table of Contents
1. Computer क्या है
2. Computer के पार्ट
3. Computer का उपयोग कैसे करें
4. Computer से क्या क्या कर सकते हैं
5. Computer का अविष्कार किसने किया
इस प्रकार से आपको भी अपने ब्लॉग पोस्ट में जितने भी (सब हेडिंग) है उन सभी को इस तरह से लिख लेना है।
Step:2
उसके बाद आप उन सारे (सब हेडिंग) जो आपने ऊपर लिखे होंगे, उन सभी पर लिंक जोड़ना होगा।
लिंक कैसे जोड़ें -
Example:
#ComputerOne
#ComputerTwo
#ComputerThree
#ComputerFour
#ComputerFive
इस तरह से सामने पर # लगा देने से वह लिंक बन जाता है। इस तरह से आप सभी (सब हेडिंग) जो आपने ऊपर लिखे हैं। उन सभी में लिंक add करना होगा, जैसे कि 1. Computer क्या है इसमें आपको #ComputerOne को Add करना होगा। इस तरह से आप सभी में Add कर लेना है। आप चाहे तो # लगा कर आप कुछ भी लिख सकते हैं, लेकिन सभी में एक ही जैसा नहीं लिख सकते, इसलिए मैंन सभी में One Two Three जोड़ दिया है। आप अपने हिसाब से बना लीजिएगा। लेकिन सभी को आपको याद रखना होगा, कि कौन से हेडिंग पर क्या लिंक बनाएं हो।
Step:3
इसके बाद आपको कोड जनरेट करना पड़ेगा।
कोड कैसे जनरेट करें-
<span id="Computer One"></span> ये रहा कोड, इस तरह से आप भी कोड बना लेना। ऊपर वहां कौन से हेडिंग पर क्या लिंक डाले हैं, उसी तरह आपको इस कोड में लिखना है, इसमें # नहीं लगाना है। इसके बाद इस कोड को, अपने ब्लॉग पोस्ट में HTML View पर सेलेक्ट कर के, उस हेडिंग को ढूंढना है। और उस हेडिंग के बीच में पेस्ट कर देना है।
Example: Computer क्या है इसे आपको ढूंढना है और Computer<span id="ComputerOne"</span>क्या है
कोड को इस तरह से बीच में पेस्ट कर देना है। इस तरह से आप बारी बारी से सभी हेडिंग का लिंक को अपने ब्लॉग पोस्ट में HTML View सेलेक्ट कर के सभी हेडिंग पर इस तरह से कोड जनरेट कर के सभी में Add कर देना है। इसके बाद आपका Table of Contents बनकर तैयार हो जायेगा।
निष्कर्ष
तो दोस्तों इस तरह से आप दो तरीके से Table of Contents बना सकते हैं। पहले में आप HTML कोड को पेस्ट कर के Automatic Table of Contents बना सकते हैं। और दूसरे वाले में खुद को लिखना होगा, लिंक बनाना होगा और कोड भी जनरेट करना पड़ेगा। लेकिन आप दूसरे वाले को सीख जाओगे तो ये आपको और भी आसान लगेगा। पहला वाला तरीका सभी Templates पर काम नहीं करता है। मेरे Template में भी काम नहीं किया। हो सकता आपके में काम कर जाये। लेकिन दूसरा तरीका सभी Tempates में काम करेगा। अगर आपको Table of Contents बनाने में कोई समस्या आ रही है तो आप हमें कॉमेंट पर बता सकते हैं। हम आपकी हेल्प करने की जरूर कोशिश करेंगे। !!!Thanks for Reading!!!