How To Add Table of Content in Blogger Post

Kyu Table of Content ko Add Karna Chahiye.?
ये ब्लॉगर के पोस्ट को अचे तरह गुड लुकिंग देती हे

ये आपके ब्लॉगर को सही तरह अर्रंगे करती हे
कंटेंट रीड करने में आसानी होती हे
ये पूरी तरह फ्री हे

Kaise Table of Content ko Add Karna Chahiye..?
इस पोस्ट में आपको बताने वाला हु की कैसे टेबल ऑफ़ कंटेंट को ब्लॉगर में ऐड करते हे

Step 1:- पहिले अपने ब्लॉगर को लोग इन करो।एडिट फिर थीम पे क्लिक करो फिर आप Control+F प्रेस करो और </head> टैग सर्च करो निचे दिए कोड को </head > टैग के ऊपर पेस्ट करना हे।

<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[                      

function mbtTOC() {var mbtTOC=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);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

Step 2:- फिर ]]></b:skin> ये कोड को ब्लॉगर थीम में सर्च करना हे। और निचे दिए कोड को ]]></b:skin> इस टैग के ऊपर पेस्ट करना हे।

.mbtTOC{border:5px solid #f7f0b8;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%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }

        
.mbtTOC 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;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

रस

Step 3:- ब्लॉगर थीम ओपन करना हे और ये कोड को <data:post.body/> बदलना हे निचे दिए हुए कोड से

Note: If you will find more than one <data:post.body/> so replace all by this code below.

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

Step 4:- आपका TOC show करने के लिए पूरी तरह से तैयार हे।

सिर्फ जब - जब पोस्ट में TOC लगाना चाहते हो तो निचे दिए कोड को पोस्ट में लगाना होगा

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

Step 5:- और उसीकी के साथ ये कोड पोस्ट के सबसे लास्ट में लगाना हे

<script>mbtTOC();</script>