Maskalem – TOC (Table Of Content) merupakan sebuah daftar isi dari artikel tersebut. Berbeda dengan daftar isi pada umumnya, karena Table Of Content jika diklik maka akan langsung menuju ke isi artikel atau istilahnya Jump Link.

Table of Content juga memudahkan pembaca karena bisa langsung pergi ke inti artikel yang dicari, apalagi jika artikelnya panjang pasti sangat melelahkan untuk menscroll dari atas ke bawah.

Keuntungan lainnya menggunakan Table of Content ini ialah membuat tampilan web menjadi lebih cantik dan juga menambah nilai SEO. Menu-menu tersebut nantinya akan terindex dan tampil pada mesin pencarian, inilah yang disebut dengan Jump Link tadi.

Script yang saya gunakan ini sangat ringan, sebab hanya menggunakan CSS dan HTML saja. Tidak menggunakan JavaScript sehingga tidak memberikan beban pada saat loading.

Membuat Table Of Content Di Blog

1. Pertama, tambahkan kode CSS berikut di atas Tag ]]></b:skin> atau di atas </style>

/* Table of Contents by maskalem.com */
.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:0px; margin-top:0px; visibility:hidden}

Perhatikan kode deretan terakhir yaitu :target::before. Jika kalian menggunakan menu header stiky atau navigasi, ubah height dan margin-top sesuai dengan ukuran menu header atau navigasi kalian.

2. Ini bagian utamanya, tambahkan kode di bawah ini pada saat kalian membuat artikel dan pastikan kalian di mode HTML bukan Compose pada saat membuat artikel tersebut.

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

Kode toc1 dan toc lainnya merupakan kode pemanggilnya, kalian bisa menambah atau menguranginya.

3. Selanjutnya kalian hanya perlu memanggilnya pada setiap heading dengan menyertakan id pemanggilnya, contoh:

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

Untuk demonya silahkan jelajahi artikel di blog Maskalem ini.

Sekian tutorial Membuat TOC (Table Of Content) Mirip Dengan Wikipedia. Semoga apa yang sudah saya tulis di dalam artikel ini dapat kalian pahami.

TOC ini bersifat manual bukan otomatis, karena tidak semua artikel pantas dipakaikan TOC. Satu yang perlu kalian ingat, gunakan TOC pada artikel yang panjang saja.