Blogger के Blog Post पर Table of Contents (ToC) कैसे Add करें? पूरी जानकारी 2021

आज हम जानेगें की Blogger Blog या Website पर Table Of Contents कैसे Add करें? पूरी जानकारी हिंदी में पढ़ सकते हैं.

Table Of Contents एक Blog या Website के लिए बहोत जरूरी होता है. Table of Content SEO (Search engine optimization) के लिए बहोत जरूरी हैं. 

अगर आप अपने Blog/Website में Table Of Content लगाएंगे तो आपके Blog Post के Rank होने के ज्यादा chance होते हैं. Wordpress पर तो इसे add करना आसान हैं, आपको बस एक plugin Hutall करना होता है और आपका काम हो गया. 

लेकिन Blogger पर Table of Content को add करने के लिए आपको थोड़ी सी मेहनत करनी पड़ेगी. लेकिन आपको परेशान होने की बिल्कुल भी जरूरत नही है, मैं आपको details में पूरी जानकारी दूँगा.

Table of Contents क्या हैं?

जब भी हम किसी बड़ी Website पर visit करते हैं, तो आपने देखा होगा कि Post/Article में जितनी भी Heading और SubHeading एक ही जगह पर दिखाई देती हैं. 

इससे ये फायदा होता है कि आपको जिस भी बारे में जानकारी चाहिए, उस Heading पर click कर देना होता हैं. इसके बाद आप उसी Paragraph पर पहोच जाओगे. 

Table of Contents की वजह से visitors को बड़े - बड़े article/posts नही पढ़ने पड़ते. Blog में table of contents add करने से आपका blog/website user friendly बन जाता है.

इसकी वजह से ऐसे Article या Blog Posts Search Engine पर ज्यादा rank होते हैं.

Blog Post में Table of Contents कैसे Add करें?

Blogger Blog/Website में Table of Contents Add करने के लिए आपको अपने Blog पर कुछ Html Code Add करने पड़ेगे.

Table of Contents Html Code for Blogger कौन - कौन से हैं? और कहा - कहा पर Add करना होगा इसके लिए आपको Step by Step समझना होगा.

1- Step: Login Blogger (Dashboard)

सबसे पहले अपने Blog/Website के Dashbord पर जाना हैं.

2- Step: Go to Theme

अब आपको Theme के Option पर Click करना हैं.

3- Step: Go to Edit Html

अब आपको Edit Html पर Click करना हैं.

4- Step: Find (Search) </head>

अब आपको </head> ढूंढना (Find) हैं, और नीचे दिया गया Html Code </head> के ऊपर Paste करना हैं.

1. Copy Html 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 techonly99.xyz 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>

5- Step: Find (Search) ]]></b:skin>

अब आपको ]]></b:skin> ढूंढना (Find) हैं, और नीचे दिया गया Html Code ]]></b:skin> के ऊपर Paste करना हैं.

2. Copy Html Code

.avsTOC{border:1px solid #999999; box-shadow:0px 0px 0 #EDE396; background-color:#f3f3f3; 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:#6fa8dc;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;}

6- Step: Replace Code

अब आपको <data:post.body/> ढूंढना (Find) हैं, और नीचे दिया गया Html Code <data:post.body/> के साथ Replace कर देना हैं.

3. Copy Html Code

<div id="post-toc"><data:post.body/></div>

7- Step: Save Theme

तीनो Html Code Paste कर देने के बाद Save कर देना है. 

8- Step: Add Code in Post/Article

अब आपको अपने सभी Post/Articles में जिस भी जगह पर Table of Contents Add करना चाहते हैं. 

नीचे दिया गया Html Code उसी जगह पर Paste करना हैं.

4. Copy Html Code

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

9- Step: Add Code End of the Posts

अब ये आखरी Html Code आपको अपने सभी Post/Article के Last (End) में Past करना पड़ेगा.

5. Copy Html Code

<script>avsTOC();</script></div>

Note- आपको Code Number 1 - 2 - 3 सिर्फ एक बार Add करना पड़ेगा. और Code Number 4 - 5 आपको अपनी सभी Post/Article में Add करना पड़ेगा.

How to Add Table of Contents in Blogger Hindi

Table of Contents Not Working Problem in Blogger

अगर आपके Blog Post/Article पर Table of Contents Work नही कर रहा है, तो इसके क्या - क्या कारण हो सकते हैं?

1- आपके Blog Post पर Contents लिखा हुआ दिख रहा होगा, लेकिन Post/Article में जो Heading हैं वो Show नही हो रही होंगी. 

• तो ऐसे में आपने Blog Post पर जितनी भी Headings Create कर रखी है, उनको Sub Heading बनाना होगा.

• Post को Html View पर Click कर के अपने Headings को H3 कर देना हैं.

2- अगर अभी भी Table of Contents में Heading Show नही हो रही है.

• तो ऐसे में Theme में Edit Html पर जाकर देखना है कि आपके Theme में <data:post.body/> दो जगह पर होगा.

• अगर दो जगह पर <data:post.body/> है, तो आपने जो Html Code इसके साथ Replace किया था. 

• उसको यहा से Remove कर लेना है, और दूसरे वाले <data:post.body/> के साथ Replace कर देना हैं.

सिर्फ इतना करने के बाद Table of Contents Not Working Problem Solve in Blogger हो जाएंगी.

निष्कर्ष (Conclusion)

आपको यह जानकारी Blogger Blog पर 'Table of Contents' कैसे Add करें? कैसी लगी Comments में जरूर बताएं. साथ ही अगर आपको कोई परेशानी हो रही हों Blogging से Related तो आप मुझे Hutagram (Hutagram Id- Techonly99) पर Dm कर सकते हैं.

साथ ही हमारा Youtube channel (Techonly99) अगर आपने अभी तक Subscribe नही किया तो, Subscribe कर लीजिए. यहाँ आपको Blogging, Adsense & Seo से Related content देखने को मिलेगा.