Cara Membuat Daftar Isi atau Table of Contents (TOC) di Postingan Blogger ala Wikipedia

Nyampling << N >> Cara Membuat Daftar Isi atau Table of Contents (TOC) di Postingan Blogger ala Wikipedia. Wikipedia merupakan sebuah situs yang dapat memberikan informasi yang paling terkenal saat ini. Banyak sumber referensi berkiblat ke situs satu ini. Salah satunya admin nyampling sendiri, banyak sumber referensi yang admin dapat dari sana. Kelebihan situs ini adalah menyajikan informasi disertai sumber yang relevan serta menampilkan struktur dari artikel secara detail.

Kenapa saya bilang secara detail, karena disetiap postingan ditampilkan daftar isi blog atau bisa dibilang Table Of Content (TOC). Pada tampilan Table Of Content (TOC) ini diberikan runutan judul heading paragraf sehingga kita bisa tauh inti dari isi artikel yang kita baca. Selayaknya sebuah buku, kita dapat mengetahui secara langsung hal - hal yang dibahas dalam artikel tersebut. Apalagi jika artikel tersebut panjang sehingga kadang kita malas untuk membacanya dari awal sampai akhir.

Pada Table Of Content (TOC), sudah diberikan link - link heading yang dibahas sehingga kita bisa langsung menuju keheading mana yang akan kita baca dengan satu klik. Rupanya TOC ini dapat kita terapkan diblog kita untuk mempermudah pembaca dalam mencari poin penting yang dibutuhkan tanpa harus repot mengscroll kebawah.

Untuk tutorial bagaimana Membuat Daftar Isi atau Table of Contents (TOC) di Postingan Blogger ala Wikipedia. Simak tutorial dibawah ini ya.

Cara Membuat Table of Contents (TOC) Di Dalam Postingan Blogger

Langkah 1. Login Blogger >> Tema >> Edit Html
Langkah 2. Untuk mempercantik tampilan, tambahkan dulu kode CSS berikut diatas tag penutup  </style>.

/* 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}

Perhatikan deretan kode terakhir yaitu :target::before. Jika kamu memakai menu sticky header / navigasi, ubah height dan margin-top sesuai dengan ukuran header / navigasi yang dipasang. Misal ukurannya 50px, maka ubah menjadi height:50px dan margin-top:-50px.

Langkah 3. Ketika membuat post baru, pastikan memilih mode HTML, BUKAN Compose. Lalu simpan kode ini di paragraf awal.

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

#toc1 sampai #toc6 adalah elemen pemanggilnya. Anda bisa menambahkan atau mengurangi sesuai kebutuhan.

Langkah 4.  Atur penulisan heading atau judul di artikel dengan menyertakan id yang sama dengan table of contents. Contohnya seperti 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

Jika Tombol 'Sembunyikan / Tampilkan' Tidak Muncul

 

Masalah ini kerap terjadi pada sebagian besar pengguna. Untuk mengatasinya, pastikan untuk TIDAK memberi line break <br/> (enter) di bagian header TOC. Yang benar harusnya seperti ini:

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

Dan ini contoh yang SALAH:

/* INI SALAH, JANGAN PAKAI LINE BREAK */
<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>

Script by Igniel

Demikianlah Tutorial Cara Membuat Daftar Isi atau Table of Contents (TOC) di Postingan Blogger ala Wikipedia. Semoga dapat bermanfaat dan salam sukses selalu.

Bagikan Artikel ini