How to Create an Automatic Table of Contents on Blogger (TOC)

How to Create an Automatic Table of Contents on blogger - If you are a WordPress platform user, of course it will be very easy with the help of a plugin to create a table of contents in article posts.users of blogger platform which does not have a plugin,let's learn how to create table of contents on blogger. before proceeding to the tutorial, I will first discuss about Table of Contents.

What is a Table of Contents (TOC)

Table of Content from an article post, the goal is to make it easier for users to jump to the part of the article they want to read, so when a user clicks on the contents of the table of content, the user will be immediately directed to the section they want to read.

How to Install Automatic Table Of Contents on Blogger

1. Login to blogger account
2. Select the Theme => Edit HTML
3. then copy the following CSS and Javascript and put it before the code </head> or </body>

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

Then, so you don't have to add the TOC calling code in the post manually and you don't have to edit old articles. please search code <data:post.body/>

Tips —
there are several <data:post.body/> codes in the blogger, usually there are 2 or 3. please select the 3rd code or the code is located on the item page.

If you have found it, please replace it with the code below

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

After that save the theme and check the results

How to Make TOC in Blog articles Appear

The above javascript code will automatically read the heading tag h3 and h4 which will then become the table of contents. In order for the table of contents to appear, make sure you use subheading or minor headings when writing articles. for example as follows

The final words

That's all the about How to Create an Automatic Blogger Table of Content (TOC). If you have any questions, please comment below, I hope it's useful.