Cara Membuat Table of Content Otomatis (TOC) Dalam Postingan Blog (Seo Friendly + Hirarki)

Kak Her

<div id='postMiddle'>
<data:post.body/>
</div>

Selanjutnya, tinggal tambahkan kode CSS yang juga sudah saya tulis di atas untuk memperindah tampilan Daftar isinya.

Terakhir, agar TOC tampil di dalam artikel. selipkan code berikut ini sesuai keinginan kalian. bisa di atas tag <h2> atau di antara paragraf 2 dan 3.

<div class='tableOfContent'>
<input aria-label='Daftar Isi' class='toctoggle' id='toctoggle' role='button' type='checkbox'/>
<span class='toctogglespan'><label class='toctogglelabel' for='toctoggle'/></span>
<div id='tocContent'></div>
</div>
<script>tockeren();</script>

Kurang lebih penerapannya seperti berikut ini.

Artikel Terkait

Bagikan:

Tinggalkan komentar