Cara Membuat Daftar isi atau Table of Content pada Blogger - Seputar Web | Tips & Tricks Website dan Blogspot

Apa itu Table of Content??

Untuk apa fungsinya??

Mari kita bahas lebih terperinci.

Table of Content adalah daftar yang biasanya ditemukan pada sebuah halaman sebelum dimulainya karya tulis, judul bab atau bagian atau deskripsi singkat dengan nomor halaman awal. ^[1]

Table of Content adalah satu fitur yang terkenal ada pada wikipedia yang seperti daftar isi, namun bukan daftar isi biasa. Ketika kita klik Link tersebut maka akan langsung lompat ke menu yang dituju atau istilahnya disebut jump link. Fitur ini akan memudahkan bagi pembaca untuk pergi ke menu yang dicari.

Kali ini saya akan membagikan trik membuat daftar isi ala wikipedia tersebut untuk pengguna blogger. Selain akan membuat tampilan postingan lebih menarik, dari sisi SEO pun akan memberikan manfaat juga. Menu-menu tersebut akan ter-index dan tampil di halaman pencarian google. Lihat contoh di bawah ini:

ini adalah contoh tampilan pada halaman pencarian google untuk website wikipedia. Perhatian kotak garis merah itu merupakan jump link atau TOC dari wikipedia di hasil pencarian google. Terlihat keren dan menarik bukan.

Script yang akan saya bagikan hanya menggunaan CSS dan HTML  saja sehingga tidak akkan membebani loading website kamu. Langsung saja yuk simak tutorial berikut.

Cara Membuat Table of Content Pada Postingan Blogspot

Untuk memanggil fungsi tersebut, kamu perlu menambahkan kode CSS berikut SETELAH atau DIATAS tag penutup </style> atau ]]></b:skin>.

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

Jika sudah, sekarang kita mulai membuat sebuat postingan baru pada Blogger, perlu diperhatikan bahwa kamu mengubah mode menjadi HTML bukan mode compose. Lalu simpan kode di bawah ini pada paragraf awal postingan kamu.

<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 dan #toc lain adalah elemen pemanggilnya. Kamu bisa mengubah sesuai kebutuhan kamu.

Setelah itu kamu bisa atur penulisan heading atau judul pada artikel dengan menyertakan id yang sama dengan table of content. Seperti contoh berikut:

<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

Dan berikut adalah Demo pada codepen saya.

Jika Tombol SEMBUNYI atau TAMPILKAN tidak muncul pada TOC, maka solusi nya adalah pastikan kamu TIDAK memberikan tag <br> (enter) di bagian Header.
Contoh BENAR:

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

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

 

Akhir Kata

Sekian tutorial cara membuat table of Content pada blogger.

Semoga bermanfaat dan bisa kamu terapkan dengan mudah di blog kamu.

Terima Kasih telah membaca😊

---

^{[1] https://en.wikipedia.org/wiki/Table_of_contents}

Related Posts