How to Create a Table of Contents on a Blog - BLOGHINT

How to Create a Table of Contents on a Blog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.


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.

First

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}
#myardftr{display:grid}
.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;}
:target::before{content:'';display:block;height:40px;margin-top:-40px;visibility:hidden}


Save template.

Second

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">
<ol>
<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>
</ol>
</div>
</div>

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

0 Response to "How to Create a Table of Contents on a Blog"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel