क्या आप भी आपने Blogger के Website और Blog में Table of Contents Add करना चाहते हो? अगर है तो यह Post में आपको सब पता चलेगा आप यह कैसे कर सकते हो और वो भी सिर्फ 5 minute में।
और दोस्तों सवाल यह है की अगर आप Blogger पे Add करना चाहते Table of Contents तो इसका क्या आपको फायदा मिलेगा तो चलिए हम यही जानते है।
दोस्तों अगर आप अपने Website और Blog में Table of Contents Add करते हो इसका फायदा आपको SEO में मिलता है और यही पे दोस्तों आपका Website और Blog को अच्छा Boost मिलेगा SERP में।
और अगर वैसे ही बोलै जाए तो आपके Website और Blog सीधे Feature Snippet में आएगा और आपको जयादा visitor आएंगे अभी चलिए जानते है आप Kaise Add करेंगे।
Table Of Contents Kya hai?
दोस्तों जब आप Internet पे Visit करते हो तब आपको एक एक Table मिला होगा और उसमे आपको सारे Heading के बारे में पता लगेगा जो की वो Post में होता है।
और आप यह से चुन सकते आपको क्या पढ़ना है उस Post में और उसी हिसाब से आप Heading के ऊपर Click करोगे तो आप सीधे जाके वही Paragraph में पहँचोगे तो यह होता है Table of Contents।
और दोस्तों इसका सबसे बड़ा फायदा यही है की आपका हर एक Paragraph भी Google में Rank करने लगेगा तो अभी चलिए जानते है आप kaise Add करेंगे यह Table of कंटेंट्स अपने Blogger के Blog में।
May You Like: How to Get AdSense Approval Within 24 Hour
Blogger पे “Table of Contents” कैसे Add करे
दोस्तों अभी में आपको सिर्फ Step को बता रहा हु और उसके बाद आपको में एक एक करके सारे Step को Explain करूँगा
- 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 के बारे में बात कर लेते है।
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 करके बताये।
May You Like:
How to Get Adsense Approval Within 24 Hour
Bing और Yahoo Se Traffic Kaise Laye In Hindi
Hello Sir, I have a Problem,
Only subheading are showing, Headings are not showing
Koi dusre theme me try kariye
Color kaise Change Kare TOC ka? Read line and fika yellow table of content dik raha hai apne jo code diya wo…so color kaise change kar sakate hai ?
Wahi to Code hai,,,, ap chahe to Colour Code ko change karke dekhiye
Nice Information
Thanks
Very use full
Hi
Mr. Soumya
kya aap apne blog par guest post ko allow karte hai?
Mai aapke blog par guest post submit krna chahta hoo, please reply jaroor kijiyega.
Abhi to me Guest Post nahi leta hu Lekin age Lunga YouTube me Update bhi dunga iske bare me
ବହୁତ୍ ଶିକ୍ଷଣୀୟ ସୌମ୍ୟ ଭାଇ ବହୁତ୍ ବହୁତ୍ ଧନ୍ୟବାଦ୍
ବହୁତ୍ ଶିକ୍ଷଣୀୟ ସୌମ୍ୟ ଭାଇ ବହୁତ୍ ବହୁତ୍ ଧନ୍ୟବାଦ୍
Thanks Manoj,
Nice
Nice
Thanks
Very useful information, Thank you for sharing
Welcome
Thanku sir for Amazing post.
Seo ke bare me bhi post kare
welcome
See my website
Wow very useful thanks
Nice Article sir
#soumya help Please bro help me muje first 50 bala step me lelo. Me bhi kuch kanra chanta hnuu.
[email protected]
Bhai meri website pe adsense approval ni ho raha h. Low value contact ka error aa raha h. But mene 2000 word ki 15 post likhi h.
ap mujhe instagram pe contact kariye
sir ek post me kitna images use kar sakte hain? sir main apne post me 3 image se jyada use nahi kar pata hun, kyoki koi-koi post me 5 image karna hota hai to nahi kar pata hun.
depend karta hai ki apka competitior ne kitna image use kiya hai
Agar hum hmare blog website me hindi & english dono language me post likhege to google adsense ka approval milega?
Ha milega
yah Code sare theme me work nahi ap ek kam kariye ap koi or theme try kariye
Bhai is settings se table of content me headings nahi dikha raha sirf subheadings hi show ho rahe hai. aisa kyu ho raha hai?? please replay me
h3 hai wo is liye, aapke blog me poore ko h3 karo to hojaayega
Thanks bro…. Very informative and well explained