How to Create a Table of Contents in Blogger Posts
How to Create a Table of Contents in Blogger Posts - Table of Contents is a list consisting of points or parts of the subject contained in an article. We can use the Table of Contents as a breakdown of the contents of the article in the form of a link so that it will make it easier for the reader to choose what part of the subject they will read. We often encounter this Table of Contents on the Wikipedia, Encyclopedia, and also PDF files from E-Book which are usually placed after the preface or the main idea of an article.
Immediately, on this occasion I will share How To Create a Table of Contents in Blogger Posts. For those of you who want to try it, just follow the steps below.
Open Blogger >> Click the Theme menu >> Click the Edit HTML button.
Then add this CSS code before the code </head> or </head><!--<head/>-->
The next step, add the code below before the code </body> or <!--</body>--></body>
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).
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
Add ID to headings like this
Pay attention to the code that is marked, for the next heading adjust the order of ID in the Table of Contents that you created. Example
Then add this code at the end of each paragraph in each section
Then the result becomes like this
When finished, please click the Publish post button and see the results on your blog.
There are so many tips that I can share this time about How to Create a Table of Contents in Blogger Posts. Hopefully useful and good luck.
Immediately, on this occasion I will share How To Create a Table of Contents in Blogger Posts. For those of you who want to try it, just follow the steps below.
How to Create a Table of Contents in Blogger Posts
Open Blogger >> Click the Theme menu >> Click the Edit HTML button.
Then add this CSS code before the code </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 the code </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 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.
Add ID to headings like this
<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.
Pay attention to the code that is marked, for the next heading adjust the order of ID in the Table of Contents that you created. Example
<h4 id="toc_1">
Heading section 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 section 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 section 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 section 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 section 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 section 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.
There are so many tips that I can share this time about How to Create a Table of Contents in Blogger Posts. Hopefully useful and good luck.
Very helpful article!Thanks.
ReplyDelete