Membuat Daftar Isi di Blog

Disini saya akan memberikan tutorial Cara Membuat Daftar Isi di Blog, atau biasa disebut List of Content atau Table of Content.
Tujuan dari dibuatnya daftar isi ini, agar para pengunjung blog bisa membaca artikel pada point tertuntu, konsepnya sama seperti daftar isi yang ada di buku, bedanya kalau di buku kalian harus mencari halaman dulu, agar bisa membaca pada bab sekian, sedangkan yang daftar isi di web ini, kalian hanya cukup klik judul/bagian artikel yang kalian ingin baca. Nah kurang lebih seperti itulah maksud dari Daftar Isi ini.

Dari pada basa-basi lagi, langsung saja ke penerapannya.

Pertama

Login ke Blog kalian.
Pilih Template > Edit HTML
dan tambahkan CSS dibawah ini.

/* 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}

Simpan template.

Kedua

Untuk penerapannya, silahkan buat postingan dan ke tab HTML
lalu gunakan tag HTML dibawah ini untuk menggunakannya.

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

Itulah penerapannya ke dalama blog. buat yang ragi seperti apa tampilan dan cara kerjanya, silahkan lihat DEMOnya dibawah ini.

Sekian artikel kali ini, kalau masih ada yang ingin di pertanyakan silahkan tinggal komentar dibawah.