Blog पर Table of Contents कैसे Add करे
Blog पर Table of Contents कैसे Add करे । Step By Step Guide
क्या आप भी अपनी ब्लॉगर वेबसाइट और ब्लॉग में विषय-सूची जोड़ना चाहते हैं? अगर ऐसा है तो इस पोस्ट में आपको सब कुछ पता चल जाएगा कि आप यह कैसे कर सकते हैं और वो भी सिर्फ 5 मिनट में।
और दोस्तों सवाल ये है की अगर आप Blogger में Table of Content Add करना चाहते है तो क्या आपको इससे कोई फ़ायदा होगा तो चलिए जानते है ये.
दोस्तों अगर आप अपनी वेबसाइट और ब्लॉग में कंटेंट की तालिका जोड़ते हैं, तो आपको इसका लाभ एसईओ में मिलता है और यहीं से आपकी वेबसाइट और ब्लॉग को SERP में अच्छा बढ़ावा मिलेगा। Blog पर Table of Contents कैसे Add करे
और अगर इसी तरह से बोला जाए तो आपकी वेबसाइट और ब्लॉग सीधे फीचर स्निपेट में आ जाएगा और आपको ज्यादा विजिटर मिलेंगे, चलिए अब जानते हैं कि आप Kaise जोड़ेंगे।
सामग्री तालिका क्या है?
दोस्तों जब आप इंटरनेट पर जाते हैं तो आपके पास एक टेबल जरूर होती है और उसमें आपको उन सभी हेडिंग के बारे में पता चल जाता है जो उस पोस्ट में हैं।
और आप इसमें से चुन सकते हैं कि आप उस पोस्ट में क्या पढ़ना चाहते हैं और उसके अनुसार यदि आप शीर्षक पर क्लिक करते हैं, तो आप सीधे उसी पैराग्राफ पर जाएंगे, तो यह सामग्री तालिका है।
और दोस्तों इसका सबसे बड़ा फायदा यह है कि आपका एक-एक पैराग्राफ भी गूगल में रैंक करना शुरू कर देगा, तो चलिए अब जानते हैं कि आप इस टेबल ऑफ कंटेंट को अपने ब्लॉगर के ब्लॉग में कैसे जोड़ेंगे।
ब्लॉगर पर “Table of Contents” कैसे जोड़ें Blog पर Table of Contents कैसे Add करे
दोस्तों अब मैं आपको सिर्फ स्टेप्स बता रहा हूं और उसके बाद में एक-एक करके सभी स्टेप्स समझाऊंगा।
- Log In to Blogger Account
- Go To Theme
- Go To Edit HTML
- Add Code in <Head> Section.
- Add Code in ]]></b:skin> Section
- Replace Code in Body
- Add Code in Post & Article
- Last Code End of the Posts
दोस्तों अब बात करते हैं एक-एक करके सभी स्टेप्स के बारे में।
Step:1 – Log In to Blogger Account
दोस्तों अभी आपको अपने Blogger Account में Log In होना है।
Step:2 – Go To Theme
दोस्तों आप अभी Theme पे जाओ
Step:3 – Go To Edit HTML
अभी आपको Customize के pass जाओ और उसके बाद आप Edit HTML पे जाओ
Step:4 – Add Code in <Head> Section.
आप अभी Search </head> tag and Paste below HTML Code above the </head> tag
Copy The Below Code
<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[
//*************Table of Content (TOC) plugin by soumyahelp.com
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>Step:5 – Add Code in ]]></b:skin> Section
Next, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>, Just like below Image
Copy The Below Code
.avsTOC{border:5px solid #EE5535;
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%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#EE5535;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC 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;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}अभी आप Save कर दीजिये
Step:6 – Replace Code
Now, Search for <data:post.body/> and replace it with the code below
<div id="post-toc"><data:post.body/></div>Step:7 – Add Code in Post & Article
अभी आपको अपने Post में Add करना है Table of Contents और जो जगह पे आपको अपना Table of Contents वही आपको Code डालना है।
Copy The Code and Add on Your Posts
<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>
Step:8 – Last Code End of the Posts
अभी आपको एक Code लेके आपको Post के End यानि की Last में डालना है। और दोस्तों Code निचे दिया गया है।
<script>avsTOC();</script></div>
Conclusion:
दोस्तों आपको हमने सारे Step बताया है जिसके मदद से आप आसानी से अपने Blogger के Website और Blog में Add कर सकते हो Table of Contents।
और दोस्तों मुझे असा है की आपको यह समझ में आया होगा अगर कुछ भी समझ मे नहीं आया तो Niche Comment करके बताये।