How to Create an Automatic Table of Contents (TOC) in Blogger Posts
Creating an automatic table of contents in blogger is not difficult, as long as you know how. If you are a WordPress platform user, of course it will be very easy with the help of a plugin to create an automatic table of contents in blog posts.
In this blogspot tutorial, let's learn how to create an automatic table of contents just like in WordPress using JavaScript and CSS code. But before continuing with the tutorial, I will first discuss what a Table of Contents is.
What is a Table of Contents (TOC)
The benefit of a Table of Contents from a blog post or article is to make it easier for users to jump to the section of the article they want to read, so that when a user clicks on the contents of the table of contents, the user will be directed to the section they want to read.
How to Install Automated Table of Contents on Blogger
If you want every blog post to automatically include a Table of Contents (TOC), you can follow the steps below:
First log in to your Blogger account, Select Themes > Edit HTML. Then copy the following CSS and Javascript code and place it before the code </head>or it can be before the code</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, please find the code <data:post.body/>and replace it with the code below:
<div id='post-toc'>
<div id='bwstocwrap' class='bwstoc' style='display:inline-block;'><div class='bwstocHeader'>Daftar Isi [<a id='bwstocLink' onclick='bwstocShow()'>Show</a>]</div><ul id='bwstoc' style='display:none'/></div>
<data:post.body/>
<script>bwstoc();</script>
</div>Note: In the blogspot template there are several codes, <data:post.body/>usually there are 2 or 3. Please select the 3rd code or the code is located on the item page.Last Save.
How to Show Table of Contents in Blog Posts
The javascript code above will automatically read each heading tag such as h2, h3 and h4 which will then become a table of contents. So you don't need to edit posts manually, like the tutorial Creating a Table of Contents in Blogger Posts that I've made earlier.
The most important thing for the table of contents to appear, make sure you use subheading or minor headings when writing blog articles.
Well, that's all about How to Create an Automatic Table of Contents in Blogger Posts. If there is something you don't understand and you have questions, please comment below. Good luck, see you..