............................
....................
.................
<br/>
<br/>
....................
.........................
..............

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

<h2>Judul Heading</h2>
..............
..................
<br/>
<br/>
....................
.........................
..............

<h3>Judul Sub Heading</h3>
...........................
.........................
..............
<br/>
<br/>
...........................
.........................
..............

<!-- akhir artikel -->
<script>tockeren();</script>

Untuk code script <script>tockeren();</script> sebaiknya anda letakkan di akhir artikel agar pemanggilan scriptnya dilakukan setelah halaman berhasil dimuat. Jadi tidak akan memberatkan blog.

Untuk hasilnya bisa di lihat melalui demo berikut ini.

D E M O

Kesimpulan

TOC Otomatis dan Semi Otomatis menggunakan script yang sama, hanya saja cara pemanggilan scriptnya yang berbeda. TOC semi otomatis lebih fleksibel karena penggunaanya yang sesuai keinginan. Jika ingin menggunakan TOC di dalam artikel, tinggal pasang code pemanggilnya.