What Is Table of Contents in Blogger Posts?
A table of contents is a list consisting of points or parts of the subject matter contained in an article. We can use the Table of Contents as details of the contents of the article in the form of links so that it will make it easier for readers to choose what information on the subject matter they will read. This Table of Contents is often found on Wikipedia sites, Encyclopedias, and also PDF files from E-Books which are usually placed after the introduction or main idea of an article.
How to Create a Table of Contents in Blogger Posts?
To make it, please follow the steps below carefully.
( 1 ) Open Blogger > Click the Theme menu > Click the Edit HTML button next to customize > Then add this CSS code before </head> or after </head><!--<head/>-->
<style type='text/css'>
/* CSS Table of Contents by droidnur */
#light-toc{background:#f5f5f5;border-radius:3px;padding:10px 20px}
#toc_list{font-weight:700;cursor:pointer;margin:10px 0}
#toc_list:focus,#toc li:focus,.back_tocontent:focus{outline:none}
#toc_list svg{vertical-align:middle}
#toc li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#toc ol li:before{left:-2em}
#toc li a{color:#222}
#toc li a:hover{color:#1e90ff}
#toc{display:grid}
.back_tocontent{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;background:#00cec9;color:#fff;font-size:11px;padding:2px 12px;border-radius:99em;transition:all .3s}
.back_tocontent:hover{background:#2d3436;color:#fff}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>Right Now, add the code below before </body> or <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$(".post-body a").on("click",function(o){if(""!==this.hash){o.preventDefault();var t=this.hash;$("html, body").animate({scrollTop:$(t).offset().top},600,function(){window.location.hash=t})}})});
//]]>
</script>Now. Click the Save theme button and follow the step below.
Next to the post section, create a post in the blogger post editor. Add below code on HTML Mode.
<div id="light-toc">
<div id="toc_list" onclick="if (document.getElementById('toc').style.display === 'none') { document.getElementById('toc').style.display = 'block'; } else { document.getElementById('toc').style.display = 'none'; }" role="button" tabindex="0">
Contents <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#000000" d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" /></svg></div>
<div id="toc">
<ol>
<li><a href="#toc_1" title="Subheading 1">Subheading Section 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Subheading Section 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Subheading Section 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Subheading Section 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Subheading Section 5</a></li>
</ol>
</div>
</div>Edit posts marked with your own writing. Then add id="toc_1"in each heading according to the ID in the code above. For example like this bellow
How to Create a Table of Contents in Blogger Posts</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Make sure you need to add an ID to the heading to be like this
<h4>
<h4 id="toc_1">
How to Create a Table of Contents in Blogger Posts</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<h4 id="toc_1">
Heading Part 1</h4>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
<h4 id="toc_2">
Heading Part 2</h4>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
<h4 id="toc_3">
Heading Part 3</h4>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
<h4 id="toc_4">
Heading Part 4</h4>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more
<h4 id="toc_5">
Heading Part 5</h4>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>After that, the result will be like this
<h4 id="toc_1">
Heading Part 1</h4>
Your Paragraph goes here........................
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>When all prosses are finished, please click the Publish or Update Post button and see the results on your blog.
Demo
And this is an example of the Table of Contents that I have already added to the blog template
Thanks for reading this article "How to Create a Table of Contents in Blogger Posts," hopefully, it's useful, once again thanks for visiting