How to Make a Table of Contents in Blogger Posts
Well, here I will provide tips on how to make a Table of Contents in Blogger Posts easily.
How to Make a Table of Contents in Blogger Posts
To make it please friend follow the steps below.
Open Blogger> Click the Theme menu> Click the Edit HTML button> Then add this CSS code before </head> or </head><!--<head/>-->
<style type='text/css'>
/* CSS Table of Contents */
#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>The next step, 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>Click the Save theme button.
Next to the posting section, create a post in the blogger post editor. Add the code below on the HTML tab (not Compose)
<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 writing 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
<h4>
How to make 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.Add ID to headings like this
<h4 id="toc_1">
How to make 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.Perhatikan kode yang ditandai, untuk heading selanjutnya sesuaikan dengan urutan ID pada Table of Contents yang sobat buat. Contohnya
<h4 id="toc_1">
Heading Bagian 1</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_2">
Heading Bagian 2</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_3">
Heading Bagian 3</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_4">
Heading Bagian 4</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_5">
Heading Bagian 5</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.Then add this code at the end of each paragraph in each section
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>Then the result becomes like this
<h4 id="toc_1">
Heading Part 1</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.
<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>When finished, please click the Publish post button and see the results on your blog.
And this is an example of a Table of Contents that I have added to the blog template
Thus tips on How to Make a Table of Contents in Blogger Posts, hopefully useful and cautious.