How to add Table of content in Blogger |
हेलो welcome. आज के इस लेख में आप जानेंगे, की आप आपकी ब्लॉगर वेबसाइट में table of content कैसे लगा सकते है और table of content को ब्लॉगर साइट में लगाने का क्या फायदा है
अगर आपको वर्तमान समय में अपनी वेबसाइट की रैंकिंग increase करनी है और अपने से ऊपर रैंक कर रही वेबसाइट को बीट करना है तो अच्छे content के साथ उससे ज्यादा seo करना पड़ेगा, और वैसे भी अब google बहुत ही स्मार्ट हो चूका है और google अब सिर्फ उन्ही वेबसाइट को टॉप में रखता है जो यूजर को बेहतरीन यूजर एक्सपीरियंस दे सके और google का algooritham दिन बा दिन बदलता जा रहा है और अब गूगल मोस्टली सिर्फ उन्ही वेबसाइट को ज्यादा टॉप में पर दिखा रहा है जो की table of content का उपयोग कर रहे है तो अगर आप भी गूगल के अल्गोरिथम के मुताबिक कम करेंगें तो, आप भी अच्छी रैंकिंग पर सकते है और वैसे भी गूगल ही नहीं विकिपीडिया जिस दिन में मिलियन और बिलियन में ट्रैफिक आता है वह भी अब अपने सभी पोस्ट में table of content का उपयोग कर रही है तो आपको भी अपनी साइट में table of content का यूज़ करना चाहिए
How to add table of content in blogger
अगर आप अपनी वेबसाइट/ब्लॉग में table of content लगाना चाहते है तो आपको नीचे बतायी गई, सभी स्टेप्स को ध्यान से follow कीजिए
- आपको नीचे सभी code दिए गए है जिनकी जरूरत आपको पड़ेगी |
- सबसे पहले आपको नीचे दिए गए jQuery की cdn लिंक दी गई है आपको यूज़ कॉपी करना है और अपने थीम के </head> tag के ऊपर paste करना है
- उसके बाद आपको नेक्स्ट स्टेप में नीचे आपको पहले नंबर पर जो jQuery के code दिए गया है यूज़ copy करना है और फिर आपको यूज़ अपनी blogger की theme के </body> के ऊपर paste करना है और सेव theme पर क्लिक कीजिए
- इसके बाद आपको नीचे दिए गए 2. का HTML का code को copy करना है इसके बाद आपको अपनी ब्लॉगर की पोस्ट को open करना है और उसके आपको पोस्ट के html सेक्शन में जाना है
- Copy किए गए html के code को पोस्ट के html में वहां पर paste करना है जहाँ पर आप अपना table of content को दिखाना चाहते है
- उसके बाद आपको अपनी पोस्ट के सभी heading को वही id देनी है जो की html के code में है और उस id के सामने लिखें गए your text here में आपको अपना text को लिखना है
- और पोस्ट को पब्लिक कर दीजिए और अपनी पोस्ट को open कीजिए और अब आपका table of content successfully add हो चूका है
अगर आपको अभी भी कोई प्रॉब्लम है इन सभी को follow करने में तो नीचे आपको एक वीडियो भी दी गई है आप उसे देख कर table of content को लगा सकते है
Features of this table of content
अब आप जानेंगे की आपको इस table of content में क्या क्या सुविधाएँ या इसमें आपको क्या क्या features मिलेंगे| आपको निम्नलिखित features मिलेंगे इस table of content मे|
- इसमें आपको hide and show का toggle button मिलेगा
- यह table of content clickable है
- यह table of content फ्री to use है
- यह table of content को html css and jQuery के जरिए बनाया गया है और यह फुल्ली lightweight है
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
1. jQuery Code
<script> //created by hindivstech$(document).ready(function(){ $("#show").click(function(){ $("#may").slideToggle("slow"); });});</script>
3. HTML CODE
<div style="background: #e5eecc; border-radius: 10px; border: 2px solid #c3c3c3;">
<div style="border-bottom: 2px solid #c3c3c3; height: 50px; line-height: 50px; text-align: center;">
<h1>
Content [<a id="show" style="color: green;"> show </a>]</h1>
</div>
<div id="may" style="padding: 20px; text-align: justifye;">
<ul>
<li><a href="#one" style="color: black; text-decoration: underline;"> Your Text Here </a></li>
<br />
<li><a href="#two" style="color: black; text-decoration: underline;"> html kya hai </a></li>
<br />
<li><a href="#three" style="color: black; text-decoration: underline;"> why should we learn Html </a></li>
<br />
<li><a href="#four" style="color: black; text-decoration: underline;"> important things of html </a></li>
<br />
<li><a href="#five" style="color: black; text-decoration: underline;"> html basic sayntax </a></li>
<br />
</ul>
</div>
</div>
So, we hope you like this post if like then don't forget to share with friends. And for more tech, Internet, tips and income ideas Subscribe our newsletter. Thankyou!
Post a Comment