Cara Membuat Daftar Isi Table of Contents (TOC) di Postingan Blog

Cara Membuat Daftar Isi Table of Contents (TOC) di Postingan Blog. Table of contents ini mirip dengan daftar isi, yang mempunyai fungsi  jump link. Hanya saja table of content ini masih dalam satu alamat link atau satu halaman postingan. Sehingga table of content in tidak memerlukan loading untuk menuju link tujuan.

Sebagai contoh silahkan kalian buka postingan saya yang sudah dipasang table of content ini:

View
Secara singkat tabel of content ini untuk mempercepat pengunjung untuk membaca bagian bacaan tertentu sesuai dengan daftar isi yang ditampilkan. Sehingga pengunjung tidak perlu menscroll cukup mengklik daftar isi yang tersedia.

Jika blog kalian membahasa tentang tutorial atau postingan yang terdapat bagian dan sub bagian alangkah baiknya menggunakan tabel of content (toc) ini. caranya sangatlah mudah berikut ini cara membuat daftar table of contents di postingan:

Langkah pertama
Silahkan copy-paste code dibawah ini, dan simpan di atas atau sebelum ]]></b:skin>:

/* Table of Contents */
.toc {background-color:#f8f9fa; border:1px solid #a2a9b1; padding:10px 13px; display:table; line-height:1.6em;}
.toc h2 {display:inline-block; margin-right:10px}
.toc a {text-decoration:none}
.toc a:hover {text-decoration:underline}
.toc ul {list-style-type:none; list-style-image:none; margin:0px; padding:0px; text-align:left}
.toc ul li {list-style-type:none;}
.toc ul li a {margin-left:.5em}
.toc ul li ul {margin-left:2em}
.toctogglelabel {cursor:pointer; color:#0645ad}
:not(:checked) > .toctoggle {display:inline !important; position:absolute;  opacity:0}
:not(:checked) > .toctogglespan:before {content:'['}
.toctoggle:not(:checked) + .toctitle .toctogglelabel:after {content:'sembunyikan';display: inline}
.toctoggle:checked + .toctitle .toctogglelabel:after {content:'tampilkan'}
:not(:checked) > .toctogglespan:after {content:']'}
.toctoggle:checked ~ ul{display:none}
:target::before {content:''; display:block; height:50px; margin-top:-50px; visibility:hidden}

Langkah Kedua
Untuk menggunakannya silahkan copy-paste kode berikut ini dalam sebuah postingan kamu untuk menampilkan daftar isi table of contents (toc), dengan merubah dari compose ganti HTML untuk memasukkan kode berikut ini silahkan salin dan letakkan di postingan HTML:

<div class="toc"><input type="checkbox" role="button" id="toctoggle" class="toctoggle">
  <div class="toctitle"><h2>Daftar isi</h2><span class="toctogglespan"><label class="toctogglelabel" for="toctoggle"></label></span>
  </div>
  <ul>
    <li>1 <a href="#toc1" title="Judul Satu">Judul Satu</a></li>
    <li>2 <a href="#toc2" title="Judul Dua">Judul Dua</a></li>
    <li>3 <a href="#toc3" title="Judul Tiga">Judul Tiga</a></li>
    <li>4 <a href="#toc4" title="Judul Empat">Judul Empat</a></li>
    <li>5 <a href="#toc5" title="Judul Lima">Judul Lima</a>
      <ul>
      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub Judul Lima ke Satu</a></li>
      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub Judul Lima ke Dua</a></li>
      </ul>
    </li>
    <li>6 <a href="#toc6" title="Judul Enam">Judul Enam</a></li>
  </ul>
</div>

Langkah Ketiga
Berikutnya dalam setiap penulisan judul yang ingin disorot atau heading yang ingin disorot sesuai daftar isi nya berikan tanda dibawah ini:

<h2 id="toc1">Judul Satu</h2>
...isi paragraf satu

<h2 id="toc2">Judul Dua</h2>
...isi paragraf dua

<h2 id="toc3">Judul Tiga</h2>
...isi paragraf tiga

<h2 id="toc4">Judul Empat</h2>
...isi paragraf empat

<h2 id="toc5">Judul Lima</h2>
...isi paragraf lima

<h3 id="toc5_1">Sub Judul Lima ke Satu</h3>
...isi paragraf lima part 1

<h3 id="toc5_2">Sub Judul Lima ke Dua</h3>
...isi paragraf lima part 2

<h2 id="toc6">Judul Enam</h2>
...isi paragraf enam

Silahkan dicoba, perhatikan langkah kedua usahakan kode agar sama seperti diatas. Karena berdasarkan pengalaman kode berubah secara otomatis pastikan kode tetap sama. Jika ada pertanyaan silahkan tulis di kolom komentar.