Friday, 4 September 2020

How to Create a Table of Contents on a Blog

How to Create a Table of Contents on a Blog

How to Create a Table of Contents on a Blog
Friday, 4 September 2020

Here I will provide a tutorial on How to Create a Table of Contents on a Blog, or commonly called a List of Content or Table of Content.
The purpose of making this table of contents is so that blog visitors can read articles at dead-end points, the concept is the same as a table of contents in a book, the difference is that in a book you have to look for a page first, so that you can read a certain chapter, while the table of contents is in the book. this website, all you have to do is click on the title / section of the article you want to read. Now that's more or less the purpose of this Table of Contents.

Instead of further ado, just get to the application.


Login to your blog.
Select Template> Edit HTML
and add the CSS below.

/* CSS Daftar Isi */
#myar-dftrisi{background:#FFFFE0;border:5px solid #f7f0b8;padding:10px 20px}
#myar-dftr{font-weight:700;cursor:pointer;margin:10px 0}
#myar-dftr:focus,#myardftr li:focus,.kembalikedaftar:focus{outline:none}
#myardftr li{background:transparent;cursor:pointer;margin:.2em 0 .2em 1em}
#myardftr ol li:before{left:-2em}
#myardftr li a{color:#222}
#myardftr li a:hover{color:#1e90ff}
.kembalikedaftar{display:inline-block;cursor:pointer;text-align:right;float:right;margin:15px auto;font-size:11px;padding:2px 12px;transition:all .3s}
.kembalikedaftar:hover{text-decoration: underline;}

Save template.


For application, please create a post and go to the HTML tab
then use the HTML tag below to use it.

<div id="myar-dftrisi">
<div id="myar-dftr" onclick="if (document.getElementById('myardftr').style.display === 'none') { document.getElementById('myardftr').style.display = 'block'; } else { document.getElementById('myardftr').style.display = 'none'; }" role="button" tabindex="0">DAFTAR ISI :</div>
<div id="myardftr">
<li><a href="#myardftr_1" title="Bagian 1">Bagian 1</a></li>
<li><a href="#myardftr_2" title="Bagian 2">Bagian 2</a></li>
<li><a href="#myardftr_3" title="Bagian 3">Bagian 3</a></li>
<li><a href="#myardftr_4" title="Bagian 4">Bagian 4</a></li>
<li><a href="#myardftr_5" title="Bagian 5">Bagian 5</a></li>

<h2 id="myardftr_1">Bagian 1</h2>
---- ISI ARTIKEL ----

<h2 id="myardftr_2">Bagian 2</h2>
---- ISI ARTIKEL ----

<h2 id="myardftr_3">Bagian 3</h2>
---- ISI ARTIKEL ----

<h2 id="myardftr_4">Bagian 4</h2>
---- ISI ARTIKEL ----

<h2 id="myardftr_5">Bagian 5</h2>
---- ISI ARTIKEL ----

That's its application to a blog. for the yeast like what it looks like and how it works, please see the DEMO below.

So many articles this time, if there are still questions, please stay in the comments below.
How to Create a Table of Contents on a Blog
4/ 5