टेबल ऑफ कंटेंट अपने ब्लॉग पर कैसे बनाएं ???
1 . टेबल ऑफ़ कंटेंट होता क्या है .
अक्सर हमअपनी पाठशाला के "बुक" में देखते हैं, वहां सबसे पहले चैप्टर्स का टेबल होता है, जिसे हम "टेबल ऑफ कंटेंट" कहते हैं. टेबल ऑफ कंटेंट से हमें "पर्टिकुलर" पेज पर जाना आसान होता है. आसानी से हम किसी भी चैप्टर को "टेबल ऑफ़ कंटेंट" की मदद से ढूंढ सकते हैं. टेबल ऑफ कंटेंट कैसा होता है उसका स्क्रीनशॉट मैंने नीचे दिखाया है.
टेबल ऑफ कंटेंट का यूज हम अपने वेबसाइट में भी कर सकते हैं, जिससे हम उस कंटेंट के पेज पर आसानी से पहुंच सके, कोई भी पोस्ट या आर्टिकल लिखते समय हेडिंग, (heading), सब हेडिंग (subheading) , माइनर हेडिंग (minor heading), और मेजर हेडिंग (major heading) ध्यान में रखें.
इससे आप अपना टेबल ऑफ कंटेंट अपने ब्लॉग पोस्ट में शो कर सकते हैं, यदि आप आप अपने कंटेंट को सब हेडिंग, माइनर हेडिंग,प्रॉपर तरीके से नहीं दोगे तो टेबल आफ कंटेंट्स नहीं शो कर सकेगा, चलो तो मैं आपको अपने ब्लॉग पोस्ट में टेबल ऑफ कंटेंट कैसे लगाते हैं इसके बारे में स्टेप बाय स्टेप बता देता हूं.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.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> स्टेप 1 :
सबसे पहले आप अपने ब्लॉग थीम के "html" पर आ जाए, वहां </head> सर्च कर ले जैसे मैंने नीचे दिए गए स्क्रीनशॉट में दिखाया है, उसके बाद ऊपर दिए हुए कोड को कॉपी कर ले, और उस कोड को </head> के ऊपर पेस्ट करके थीम को "सेव" करें.
से लगाना बहुत ही आसान होता है, इसलिए नीचे दिए गए स्टेप को फॉलो करें,
स्टेप 2 :
इस स्टेप में फिर से "थीम' के "html" में जाकर " ]]></b:skin> " सर्च करना है, और नीचे दिया गया कोड कॉपी करके एग्जैक्ट " ]]></b:skin> " इसके ऊपर पेस्ट करना है और "थीम' को सेव करना है, इस स्टेप आप अपने टेबल कंटेंट के लिए बहुत सारे कस्टमाइजेशन कर सकते हैं.
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.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:4px 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}
*/
टेबल कंटेंट के " कस्टमाइजेशन "में आप इस कोड में बैकग्राउंड कलर, टेक्स्ट कलर, बॉक्स बॉर्डर, बॉर्डर स्टाइल, बॉर्डर रेडियस, बॉक्स शैडो, लाइन हाइट, यह सभी टेबल कंटेंस के महत्वपूर्ण "पैरामीटर्स को चेंज" कर सकते हैं और अपना टेबल ऑफ कंटेंट और अच्छी तरह डिजाइन कर सकते हैं.
<div id="post-toc"><data:post.body/></div> स्टेप 3 :
यहां आपको " थीम" के "html" में आकर <data:post.body/> सर्च करना है, और <data:post.body/> को रिप्लेस करके <div id="post-toc"><data:post.body/></div> यह कोड लगाना है, और " थीम" को सेव करना है, जैसे मैंने नीचे स्क्रीनशॉट में दिखाया है.
स्टेप 4
जैसे मैंने नीचे दिया है इस कोड का इस्तेमाल, हम "ब्लॉगर थीम" में नहीं बल्कि "ब्लॉग पोस्ट" में करने वाले हैं, जहां हमें "टेबल ऑफ़ कंटेंट" दिखाना है. ऊपर दिए कोड का इस्तेमाल टेबल ऑफ़ कंटेंट दिखाने के लिए किया जाता है.
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div> इसलिए सबसे पहले ऊपर दिए गए कोड को कॉपी कर ले, कोड कॉपी करने के बाद हमें यह कोड, हेडिंग के पहले जहां हमें टेबल ऑफ कंटेंट दिखाना है वहां उस पोस्ट पर इसे पेस्ट कर दे और सेव कर दे, जैसे मैंने नीचे दिए गए स्क्रीनशॉट में दिखाया है उसी तरह से स्टेप फॉलो कर दीजिए.
स्टेप 5.
<script>mbtTOC2();</script> सबसे लास्ट और आखिरी का स्टैंप,जिसमें हमें ऊपर का कोड कॉपी करना है,और अपने ब्लॉगर पोस्ट में आना है,और ब्लॉगर पोस्ट में सबसे नीचे पेस्ट करना है, और उसे सेव करना है उसके बाद, वेबसाइट के या पोस्ट के पेज पर आना है, और रिफ्रेश करना है तो आप देखोगे की "टेबल ऑफ कंटेंट" आपके पेज पर दिखना शुरू हो जाएगा.
