Blogger Me Table Of Contents Kaise Add Kare

 Blogger Aaj Ke Samay me Sabse Mahtvpurn Blogging Plateform hai. Is post me Aapko Table of Content ( TOC ) ke Bare batayenge.

Yadi Aap Wordress user hai to aapke liye bahut easy hoga apne post me table of content ko use karne liye. Aisa Aap Plugin ke madad se kar sakte hai. Jabki Blogger par aisa koi plugin nahi hai jisse ki Automatic table of content generate ho sake. Is post me ham aapko Automatic table of content ke bare me discuss karenge.

Table Of content kya hai?

Table of content wo Article ka Post hota hai. Jiski Madad se Aap post ke kisi bhi bhaag tak Asani se pahuch sakte hai. Aur Iska Main Maksad hota hai Ki User Sirf ek Click me apne Post ko puri tarah se parh paye ya Apne main heading ke bare me parh paaye.

How to Install Automatic Table of content on Blogger

1. Blogger Me login kijiye.

2. Aap Blogger Dashboard me Jakar EDIT HTML par click kijiye.

3. Aap Niche ka diya gaya code copy kijiye. Aur Isko </head> OR </body> Tag ko search kijiye. Aur code iske Upar Paste kar dijiye.

<b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page"'>

<style media='all' type='text/css'>

.bwstoc {

 margin: 10px 0;

 background: #F0F0F0;

 border: 1px solid #ddd;

}

.bwstoc ol, .bwstoc ul {

 margin: 0 0 15px 20px;

 padding: 0;

}

.bwstoc ul {

 list-style: disc;

}

.bwstoc ol li, .bwstoc ul li {

 font-size: 95%;

 padding: 5px 10px 0 0;

 margin: 0 0 0 30px;

}

.bwstoc a {

 text-decoration: none;

}

.bwstoc a:hover {

 text-decoration: underline;

}

.bwstoc .bwstocHeader {

 font-weight: bold;

 font-size: 100%;

 position: relative;

 outline: none;

 border: none;

 padding: 5px 15px 5px 5px;

 margin: 5px 10px;

}

.bwstoc .bwstocHeader a {

 text-decoration: none;

 cursor: pointer;

}

.bwstoc .bwstocHeader a:hover {

 text-decoration: underline;

}

</style>

<!-- Blogger TOC -->

<script type='text/javascript'>

//<![CDATA[function bwstoc() { var bwstoc = i = headinglength = getheading = 0; headinglength = document.getElementById("post-toc").querySelectorAll("h2, h3, h4").length; if (headinglength > 1) {  // Only Shown If At least 2 Headings are Found for (i = 0; i < headinglength; i++) { getheading = document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].textContent;

 var bws_1 = getheading.replace(/[^a-z0-9]/gi," ");

 var bws_2 = bws_1.trim();

 var getHeadUri = bws_2.replace(/s/g, "_");

 document.getElementById("post-toc").querySelectorAll("h2, h3, h4")[i].setAttribute("id", getHeadUri);

 bwstoc = "<li><a href='#" + getHeadUri + "'>" + getheading + "</a></li>";

 document.getElementById("bwstoc").innerHTML += bwstoc;

 }

 } else { document.write("<style>.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style>"); }

}

function bwstocShow() {

    var bwstocBtn = document.getElementById('bwstoc');

 var bwstocWrapID = document.getElementById('bwstocwrap');

 var bwstocLink = document.getElementById('bwstocLink');

    if (bwstocBtn.style.display === 'none') {

        bwstocBtn.style.display = 'block';

 bwstocWrapID.style.display = 'block';

 bwstocLink.innerHTML = 'Hide';

 

    } else {

        bwstocBtn.style.display = 'none';

 bwstocWrapID.style.display = 'inline-block';

 bwstocLink.innerHTML = 'Show';

    }

}

//]]>

</script>

<noscript><style media='all' type='text/css'>#bwstocwrap,.bwstoc{display:none !important;visibility:hidden !important;width:0 !important;height:0 !important;}</style></noscript>

</b:if>

4. To Aapne TOC Calling Code Apne Post me Manually Add kar diya hai. Aapko Apne old Articles me Manually add karne ki jaroorat nahi hai. Ab Aap <data:post.body/> code search kijiye.

Yadi Aap Apne blogger theme me ye code milta hai to aap isko Is code ke badle me paste kar diye.

<div id='post-toc'>

<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Table of Contents [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>

<data:post.body/>

<script>bwstoc();</script>

</div>

5. Iske baad Aap Template ko save kar dijiye. 

Table Of Content Blogger Par kaise dikhega.

Upar ka diya gaya Javascript code. Aapke POst ke heading ko table of content ke roop me dikhata hai. aur aapke content ko order karta hai. jisme aapke subheading bhi shamil hote hai.

Final Word 

To hame aapko bataya Table of content ke bare me . Yadi aapke pas koi question hai to aap hame comment ke madhyam se bata sakte hai.