October 08, 2018

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 this Table of Contents as a breakdown of 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 sites like Wikipedia, Encyclopedia, and also on PDF files from an e-book which are usually placed after the preface or the main idea of the article. In this article, you will be provided with tips on How to Create a Table of Contents in Blogger Posts?


How To Create Table of Contents in Blogger Posts?



How to Make a Table of Contents in Blogger Posts?


To make this please follow the steps below:
1. Open Blogger, Click the Theme menu, Click the Edit HTML button. Then add this CSS code before </head> or &lt;/head&gt;&lt;!-<head/>-&gt;

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

2. The next step is to add the codes given below, before </body> or &lt;!--</body>--&gt;&lt;/body&gt;

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


3. Click the Save Theme button.


4. Next when you write a new post, open up the blogger post editor window. Add the code below on the HTML tab (not in the Compose tab)

<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 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Subheading 5</a></li>
</ol>
</div></div>

5. Edit the Subheading 1, Subheading 2,... as per your choice of content.

6. Add ID to the respective headings like the one below:

<h4 id="toc_1">
This is a Sample Subheading</h4>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum

Pay attention to the id="toc_1" as this is set as per the subheadings in your post

The following example will make it clear for you:

<h4 id="toc_1">
Subheading 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">
Subheading 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">
Subheading 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">
Subheading 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">
Subheading 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.


7. Next add this code at the end of each paragraph:

<div class="back_tocontent" onclick="document.getElementById('toc_list').scrollIntoView(true);" role="button" tabindex="0">
Back to Content</div>


Then it should look like this:

<h4 id="toc_1">
Subheading 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 click the Publish Button.

See the preview in the image below:


How to Make a Table of Contents in Blogger Posts




I hope this is a very useful tip on How to Create a Table of Contents in Blogger Posts. Do share with friends!!

0 Comments

Post a Comment

Avoid Spammy Comments