Membuat Daftar Isi di Postingan Blogger Mirip Wikipedia

Salah satu yang lagi trend dalam memposting artikel blog adalah tampilan daftar isi dalam postingan blogger. Dalam bahasa kerennya adalah Table Of Content (TOC).

Tampilan daftar isi atau tabel of content pada sebuah artikel ini bisa anda lihat pada situs wikipedia.

Setiap konten pada wikipedia pasti ada daftar isi didalam artikelnya. Gunanya secara ringkas untuk memudahkan pengunjung mencari artikel yang dibutuhkan saja, tanpa harus scrool dari atas ke bawah cukup hanyak klik pada daftar isi yang tersedia.

Fungsi Daftar Isi pada Postingan Blog

Tampilan dari daftar isi pada postingan blog selain memudahkan dalam mengakses artikel yang dicari, ada beberapa fungsi lain yang tak kalah pentingnya.

Fungsi daftar isi atau TOC pada postingan blog berfungsi untuk meningkatkan SEO blog anda. Daftar isi ini akan tampil pada halaman pencarian dari mesin pencari seperti google.

Contohnya seperti tampilan berikut ini :

Jadi selain bermanfaat untuk SEO, daftar isi ini juga memperindah tampil artikel anda juga.

Baca Juga : Cara membuat anti blog di blogger dengan mudah tanpa ribet

Cara Membuat Daftar Isi di Postingan Blogger

Banyak cara membuat daftar isi atau TOC di blogger, namun dari beberapa cobaan yang saya coba saya memilih menggunakan Daftar Isi punyaknya mbak igniel.

Mengapa saya memilihnya?

Ada satu hal yang membuat keputusan saya memakai cara ini, yaitu cara membuat daftar isi yang dibagikan oleh mbak igniel bisa membuat sub menu dari daftar isi tersebut.

Kadang daftar isi memang membutuhkan submenu-submenu yang lain agar artikel mudah di baca dan dipahami.

Untuk membuatnya silahkan ikuti panduan dibawah ini.

Cara membuat Daftar isi atau Table Of Content (TOC) di Blogger

Pertama, buka dasboard blogger anda dan pilih menu tema / template

Kedua, letakkan kode berikut ini diatas </style> atau ]]></b:skin>.

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

Ketiga, jika sudah klik tombol Simpan

Penting :

Perlu diperhatikan pada kode diatas di baris paling bawah pada kode :target::before, Jika template anda menggunakan 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.

Jika kurang paham bisa tanya melalui kotak komentar untuk di diskusikan bersama

Menampilkan Daftar Isi pada Artikel

Sekarang jika langkah-langkah diatas sudah di lakukan, saatnya mencoba table of content pada postingan blog. Untuk menampilkannya anda bisa mengikuti panduan berikut.

Pertama, pastikan anda sudah pada menu admin blogger

Kedua, klik pada + Postingan baru

Ketiga, ubah penulisan dengan mode Tampilan HTML, setelah itu letakkan kode di bawah ini di awal paragraf atau dibawah paragraf pertama.

<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

Penting

Pada kode diatas ada istilah #toc1 dan #toc lain yang merupakan kode pemanggilnya dari sub bab daftar isi. Anda bisa menambahkan atau mengurangi sesuai jumlah sub dari artikel anda.

Keempat, memberikan kode pemanggil pada sub bab yang akan dijadikan daftar isi atau table of content (TOC) di artikel.

Untuk kode pemanggilanya anda bisa melihat contoh dibawah ini.

Kelima, terakhir silahkan simpan kembali artikel yang anda berikan daftar isi tadi.

Jika berhasil tampilannya seperti pada contoh dibawah ini, silahkan klik tombol demo untuk melihat hasilnya.

Demo

Mengatasi Tombol Tampilkan dan Sembunyikan tidak terlihat

Jika anda baru mencoba memasang table of content ini pertama kali, kadang kala anda akan menemui hasil yang tidak sesuai dengan contoh.

Salah satunya adalah tombol Tampilkan dan Sembunyikan tidak terlihat, hal ini karena kode dibawah ini tidak satu baris.

<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 yang benar penulisan kodenya tidak ter enter seperti kode di atas, melainkan harus dijadikan satu baris.

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

Hal itu terjadi karena memang mode penulisan di ubah ke mode PENULISAN bukan mode HTML, ketika sudah menulis di mode HTML langsung klik tombol simpan jangan dikembalikan ke mode PENULISAN.

Baca Juga : Cara agar artikel tidak mudah di copy paste orang lain di blog

Apabila anda terpaksa harus membuka postingan ke mode PENULISAN anda harus memperbaiki lagi posisi ke satu baris penulisan seperti diatas.

Semoga artikel ini bisa bermanfaat dan berguna.

Massiswo.Com