आप भी Blogger में Table of Contents Add करना चाहते हैं? यदि हाँ तो इस post में आपको इसकी पूरी जानकारी मिल जाएगी। Wordpress में आप आसानी से Table of Contents Plugin को Install करके अपने Blog में Table of Contents लगा लेते हैं लेकिन जब बात Blogger की आती है तो हमें Coding की आवश्यकता पड़ती है और बहुत से Bloggers को कोडिंग से Problems होती है लेकिन इस Post में एक Beginner Blogger भी Table Of Contents अपने Blogger Post में लगा पाएगा।

जब आप अपने Blogger में Table Of Contents Use करते हैं तो इससे आपके User को आपका Content Access करना Easy हो जाता है और साथ ही साथ Google को भी समझने में आसानी होती है और वह आपके Content को Search Engine (SERP) में अच्छे से दिखा पाता है।

What is Table of Contents ?

किसी भी Blog Post में आप जितने Headings लिखते हैं उन Headings को एक Table में Add कर देता है और User पूरे Content को संक्षिप्त में देख पाता है और उसे जिस Content को पढने की जरूरत होती है उस Headings पर क्लिक करके Direct वह उस Paragraph Area पर चला जाता है इसी को Table of Contents कहते हैं।

Table of Contents से Google में भी Contents को रैंक करने में आसानी होती है और इससे Blog के Traffic में भी Improvement होता है । SEO के लिए  Table of Contents Add करना एक Blogs में बहुत जरूरी होता है।

How To Add “Table of Contents” in Blogger | Guide Step By Step

Freinds अभी मैं आपको सिर्फ Steps बता रहा हु और उसके बाद आपको सारे Steps को Explain करूँगा, चलिए अब step by step image के साथ Blogger में Table Of Contents Add करना बताता हूं।

  1. Go to Blogger Dashboard~
  2. Go to Theme Option~
  3. Select Edit HTML~
  4. Add Code Between <Head> Section~
  5. Add Code Above ]]></b:skin> Section~
  6. Replace <data:post.body/> code~
  7. Add Code in Post~
  8. Add Code End of The Post~

Step 1 - Go to Blogger Dashboard 

अपने Blogger में Login करके Blogger Dashboard में जाना है।




Step 2 – Go to Theme Option

अब आपको Theme Option पर Click करना है।



Step 3 – Select & Click Edit HTML

उसके बाद आपको Customize के side वाले Dropdown बटन पर Click करना है और Edit html पर Click करना है।


Step 4 – Add Code Between <Head> to </Head> Section

अब आपको नीचे दिया गया कोड <Head> को Search करके <Head> के नीचे पेस्ट कर देना है। 




Code Box
<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 thehindibiography.in
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[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 Above ]]></b:skin> Section in Theme HTML

अब आपको ]]></b:skin> के पहले निचे दिया गया Code Paste करना है, Save Button पर Click करके Code Save कर लेना है।




Code Box
.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;}
>

Step 6 – Replace Code <data:post.body/>

<data:post.body/> को नीचे दिए गए Code से Replace कर देना है।





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

Step 7 – Add Code in Post HTML

अभी आपको अपने Post में Table of Contents को Add करना है जिस जगह पे आपको अपना Table of Contents लगाना है वही ये Code आपको डालना है।


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


Step 8 – Add Code End of The Post HTML

अभी आपको ये Code लेके आपको Post के Last में डालना है। और दोस्तों Code निचे है।


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


Conclusion

दोस्तों मैने आपको सभी Steps को बताया है जिसके मदद से आप Easley अपने Blogger के Blog में Table of Contents Add कर चूके होंगे ।

यह भी पढ़ें👇