Tuesday, October 4, 2022
No menu items!

Blog पर Table of Contents कैसे Add करे

Must Read

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 करे

दोस्तों अब मैं आपको सिर्फ स्टेप्स बता रहा हूं और उसके बाद में एक-एक करके सभी स्टेप्स समझाऊंगा।

  1. Log In to Blogger Account
  2. Go To Theme
  3. Go To Edit HTML
  4. Add Code in <Head> Section.
  5. Add Code in ]]></b:skin> Section
  6. Replace Code in Body
  7. Add Code in Post & Article
  8. Last Code End of the Posts

दोस्तों अब बात करते हैं एक-एक करके सभी स्टेप्स के बारे में।

Step:1 – Log In to Blogger Account

दोस्तों अभी आपको अपने Blogger Account में Log In होना है।

Step:1 – Log In to Blogger Account दोस्तों अभी आपको अपने Blogger Account में Log In होना है।
Step:1 – Log In to Blogger Account दोस्तों अभी आपको अपने Blogger Account में Log In होना है।

Step:2 – Go To Theme

दोस्तों आप अभी Theme पे जाओ

Step:2 – Go To Theme
Step:2 – Go To Theme

Step:3 – Go To Edit HTML

अभी आपको Customize के pass जाओ और उसके बाद आप Edit HTML पे जाओ

Step:3 – Go To Edit HTML
Step:3 – Go To Edit HTML

 

Step:4 – Add Code in <Head> Section.

आप अभी Search </head> tag and Paste below HTML Code above the </head> tag

Step:4 – Add Code in <Head> Section.
Step:4 – Add Code inSection.

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

Blogger Bskin
Blog पर Table of Contents कैसे Add करे

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

Blogger Replace it
Blog पर Table of Contents कैसे Add करे

 

<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 करके बताये।

10 पैसे कमने वाला ऐप

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest News

Wazir X kya hai? Centralized exchange | WazirX P2P क्या है और यह कैसे काम करता है?

Wazir X kya hai? Centralized exchange Wazir X kya hai isko kaise use kar te hai Centralized Exchange: WAZIR X दोस्तों...

More Articles Like This