Friday, 17 May 2019

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 be easier for the reader to choose what information the subject area will be reading. We often find the Table of Contents on Wikipedia sites, Encyclopedias, and also PDF files from E-Books which are usually placed after the introduction or main idea of ​​an article.


Alright, here Arlina Design will provide tips on how to easily create a Table of Contents in Blogger Posts.

How to Create a Table of Contents in Blogger Posts


To make it, please follow the steps below, buddy.


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:&#39;&#39;;display:block;height:40px;margin-top:-40px;visibility:hidden}
</style>


The next step, add the code 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>

Click the Save theme button .


Next to the posting section, make 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">Bagian Subheading 1</a></li>
<li><a href="#toc_2" title="Subheading 2">Bagian Subheading 2</a></li>
<li><a href="#toc_3" title="Subheading 3">Bagian Subheading 3</a></li>
<li><a href="#toc_4" title="Subheading 4">Bagian Subheading 4</a></li>
<li><a href="#toc_5" title="Subheading 5">Bagian Subheading 5</a></li>
</ol>
</div>
</div>

Edit posts marked with their own writing. Then add id="toc_1"to 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 IDs to headings to be 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 marked code, for the next heading, adjust the order of ID on the Table of Contents that you made. Example

<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.
<h4 id="toc_2">
Heading Part 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 Part 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 Part 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 Part 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>

So the results are 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 here is an example of the 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 grateful.
Share This :
SUBSCRIBE TO OUR NEWSLETTER

Add Your Comments

bold <b>b</b>
italic <i>i</i>
underline <u>u</u>
HTML<code></code> use Parser

Emoticon
Parser
😊
😉
😀
😁
😎
😍
😜
😑
😇
💖
😯
😱
😭
👍
🍻

Read More...