3 macam versi Script Daftar Isi atau Table Of Conten (TOC) dalam Artikel untuk Blogger

Fungsi dari Daftar Isi pada sebuah artikel adalah untuk mempermudah pengunjung (visitor) dalam mencari tema pembahasan yang mereka inginkan.

Mereka akan mengetahui apa saja pokok-pokok bahasan yang ada didalam menu artikel.

Selain hal diatas, pengunjung juga bisa dengan mudah memilih topik yang akan mereka baca terlebih dahulu.

Dua hal tadi bisa menjadikan Faktor Kenyamanan bagi pengunjung, dan tentu saja bisa menaikan tingkat Kreadibilitas pemilik artikel (Website/Blog).

1. Script Daftar Isi versi Simple yang Pertama

<h3>Daftar Isi</h3>

<div>

 <ul>

  <li><a href='#judul1'><b>topik anda</b></a></li>

  <li><a href='#judul2'><b>topik anda</b></a></li>

  <li><a href='#judul3'><b>topik anda</b></a></li>

<li><a href='#judul4'><b>topik anda</b></a></li>

<li><a href='#judul5'><b>topik anda</b></a></li>

<li><a href='#judul6'><b>topik anda</b></a></li>

<li><a href='#judul7'><b>topik anda</b></a></li>

<li><a href='#judul8'><b>topik anda</b></a></li>

<li><a href='#judul9'><b>topik anda</b></a></li>

<li><a href='#judul10'><b>topik anda</b></a></li>

<li><a href='#judul11'><b>topik anda</b></a></li>

<li><a href='#judul12'><b>topik anda </b></a></li>

<li><a href='#judul13'><b>topik anda</b></a></li>

<li><a href='#judul14'><b>Jadied Kid's Platinum</b></a></li>

<li><a href='#judul15'><b>topik anda</b></a></li>

<li><a href='#judul16'><b>topik anda</b></a></li>

</ul>

</div>

Kode pemanggil pada artikel yang anda buat. Ingat untuk selalu menggunakan mode HTML ketika anda paste script.

<h2 id='judul1'>topik anda</h2>

isi dari topik anda....

<h2 id='judul2'>topik anda</h2>

isi dari topik anda....

<h2 id='judul3'>topik anda</h2>

isi dari topik anda....

<h2 id='judul4'>topik anda</h2>

<h2 id='judul5'>topik anda</h2>

<h2 id='judul6'>topik anda</h2>

<h2 id='judul7'>topik anda</h2>

<h2 id='judul8'>topik anda</h2>

<h2 id='judul9'>topik anda</h2>

<h2 id='judul10'>topik anda</h2>

<h2 id='judul11'>topik anda</h2>

<h2 id='judul12'>topik anda</h2>

<h2 id='judul13'>topik anda</h2>

isi dari topik anda....

<h2 id='judul14'>topik anda</h2>

<h2 id='judul15'>topik anda</h2>

<h2 id='judul16'>topik anda</h2>

2.Daftar isi simple kedua

<b>Daftar isi:</b><br/>

<ol>
<li><a href='#daftarisi-1'>topik anda</a></li>
<li><a href='#daftarisi-2'>topik anda</a></li>

   <li><a href='#daftarisi-3'>topik anda</a></li>

<li><a href='#daftarisi-4'>topik anda</a></li>

   <li><a href='#daftarisi-5'>topik anda</a></li>

   <li><a href='#daftarisi-6'>topik anda</a></li>

<li><a href='#daftarisi-7'>topik anda</a></li>

<li><a href='#daftarisi-8'>topik anda</a></li>

   <li><a href='#daftarisi-9'>topik anda</a></li>

   <li><a href='#daftarisi-10'>topik anda</a></li>

</ol>

<br/>

Kode pemanggil

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

<h2 id='daftarisi-1'>topik anda</h2>

3.Daftar isi dengan Backround kotak biru dilengkapi menu “Tampilkan/Sembunyikan” 

 Diatas kode ]]></b:skin>

/* Table of Contents by igniel.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}

Dalam postingan mode 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">topik anda</a></li>

    <li>2 <a href="#toc2" title="Judul Dua">topik anda</a></li>

    <li>3 <a href="#toc3" title="Judul Tiga">topik anda</a></li>

    <li>4 <a href="#toc4" title="Judul Empat">topik anda</a></li>

    <li>5 <a href="#toc5" title="Judul Lima">topik anda</a>

      <ul>

      <li>5.1 <a href="#toc5_1" title="Sub Judul Lima ke Satu">Sub topik anda ke Satu</a></li>

      <li>5.2 <a href="#toc5_2" title="Sub Judul Lima ke Dua">Sub topik anda ke Dua</a></li>

      </ul>

    </li>

    <li>6 <a href="#toc6" title="Judul Enam">topik anda</a></li>

<li>7 <a href="#toc7" title="Judul Tujuh">topik anda</a></li>

<li>8 <a href="#toc8" title="Judul Delapan">topik anda</a></li>

<li>9 <a href="#toc9" title="Judul Sembilan">topik anda</a></li>

<li>10 <a href="#toc10" title="Judul Sepuluh">topik anda</a></li>

 <li>11 <a href="#toc11" title="Judul Sebelas">topik anda</a></li>

</ul>

</div>

#toc1 dan #toc lain adalah elemen pemanggilnya. Anda bisa menambahkan atau mengurangi sesuai kebutuhan. 

Selanjutnya atur penulisan heading atau judul di artikel dengan menyertakan id yang sama dengan table of contents. Contohnya seperti ini.

<h2 id="toc1">topik anda</h2>

...isi paragraf satu

 

<h2 id="toc2">topik anda</h2>

...isi paragraf dua

 

<h2 id="toc3">topik anda</h2>

...isi paragraf tiga

 

<h2 id="toc4">topik anda</h2>

...isi paragraf empat

 

<h2 id="toc5">topik anda</h2>

...isi paragraf lima

 

<h3 id="toc5_1">Sub topik anda ke Satu</h3>

...isi paragraf lima part 1

 

<h3 id="toc5_2">Sub topik anda ke Dua</h3>

...isi paragraf lima part 2

 

<h2 id="toc6">topik anda</h2>

...isi paragraf enam

 

Dan seterusnya…

Ganti semua yang bertanda kuning sesuai dengan kebutuhan anda.