Cara Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia yang SEO Friendly

Cara Membuat Table of Contents Wikipedia Di Dalam Artikel Blog

Wikipedia terkenal akan satu fiturnya yang bernama table of contents atau bisa juga disebut daftar isi. Tapi bukan sekedar daftar isi biasa, karena ketika di-klik akan otomatis loncat ke menu yang dituju alias jump link. Tentunya ini memudahkan pengunjung karena bisa langsung pergi ke menu yang dicari. Apalagi kalau artikelnya super panjang yang bikin pegel kalau scroll terus.

Dan daftar isi Wikipedia tersebut bisa lho dibuat untuk Blogger. Bukan sekedar gaya-gayaan dan membuat tampilan lebih menarik, tapi ada satu manfaat besar dari sisi SEO. Menu-menu tersebut akan terindex dan tampil dalam hasil pencarian. Inilah yang disebut jump link tadi.

Scriptnya sangat ringan karena hanya dibuat menggunakan CSS dan HTML saja. Tidak perlu Javascript jadi tidak menambah beban ketika loading.

Sebagai contoh adalah artikel dengan judul Cara Daftar Dan Membuat Facebook Instant Articles Untuk Blogger. Di dalamnya terdapat table of content untuk Blogspot seperti Wikipedia. Tidak hanya itu, perhatikan gambar berikut.

Cara Membuat Table of Contents (TOC) di Postingan Blogger

Ini adalah contoh dari search result ketika melakukan pencarian di Google. Blog Igniel mempunyai link tambahan di bagian bawah alias jump link yang terindex dari table of contents Wikipedia di dalam artikel. Berbeda dengan blog diatasnya (posisi satu) yang tidak mempunyai jump link. Meski blog Igniel ada di posisi kedua, ini akan lebih menarik perhatian pengunjung karena mereka menemukan satu hal berbeda yang tidak ada di blog lain.

Sudah tertarik menggunakannya? Yuk kita langsung ke tutorialnya.


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

Pada dasarnya akan membaca id heading yang ada di dalam struktur HTML dan langsung loncat ke bagian heading yang dipilih. Bingung? Sekalian praktek saja biar lebih gampang dipahami.

Untuk mepercantik tampilan, tambahkan dulu kode CSS berikut DI ATAS 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.

Sekarang masuk ke bagian utamanya yaitu membuat daftar isi table of content di dalam postingan Blogger. 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 dan #toc lain adalah elemen pemanggilnya. Kamu 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">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

Cara Membuat Daftar Isi (Table of Contents) Pada Blog dan Website


Untuk demo atau previewnya bisa cek di Codepen saya.



Sekian tutorial cara membuat daftar isi dalam postingan blog seperti table of contents Wikipedia. Semoga bisa dipahami dengan mudah. Dan ada baiknya TOC ini hanya digunakan pada postingan yang benar-benar panjang. Karena kalau kependekan malah mengganggu, orang tinggal scroll kok mesti pakai jump link segala. Jadi terkesan kurang bagus kan. Kalau semua postingan mau ditambahkan TOC, maka perbanyaklah jumlah kata setiap artikel. Semangat!

Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

54 Komentar

  1. makasih gan tutorialnya, sangat membantu

    ReplyDelete
  2. Terima kasih bebangat. Sudah saya bikin dan menjadi.

    Dimuatkan dalam artikel saya bertajuk "9 Tips Mudah Menjadi Usahawan Gigih". Boleh dilihat melalui Google+... Ya klik gambar yang ganteng itu... akan dibawa ke G+nya...

    ReplyDelete
  3. kalau sticky di mobile.
    dan tidak sticky di pc gimana itu mbak?

    apakah bisa?

    ReplyDelete
    Replies
    1. Bisa. Tapi buat apa TOC dijadikan sticky? Nanti malah mengganggu.

      Delete
  4. Mantepp! Nanti sy coba deh di blog sy :) thanks mbak igniel

    ReplyDelete
  5. hallo mbak igniel, tanya dong..
    aku udah terapin tapi kok pas di klik mengarahnya melebihi heading 2 yang aku set ya?

    ReplyDelete
  6. eh sudah bisa hehe. punya saya pakai sticky header ternyata :3

    ReplyDelete
  7. ini supprt untuk AMP tidak kak, lalu itu #TOC bisa di ganti atau tidak?

    ReplyDelete
    Replies
    1. Support karena cuma CSS dan HTML aja tanpa Javascript.
      Iya #toc bisa diganti namanya.

      Delete
  8. Mbak ini kenapa ya? Saya sdh coba namun tulisan sembunyikan malah berada di bawah heading daftar isi, gak mau berada disampingnya. Ini screenshotnya:

    https://prnt.sc/ljehv0

    ReplyDelete
    Replies
    1. Ada pengaruh dari CSS template kayanya. Alamat blognya apa?

      Delete
  9. Ini mbak saya cobanya di blog percobaan yang templatenya sama dengan blog utama:

    https://bloggtipssehat.blogspot.com/2018/11/tes-toc-table-of-content.html

    ReplyDelete
    Replies
    1. Tambahkan CSS ini:
      .toctitle h2 {display: inline-block}

      Delete
    2. Masih gak berfungsi mbak, tetap css yang di .post-body h2 nya yang terbaca. Padahal sudah dikasih parameter class.

      Delete
    3. Coba kasih important ya.
      .toctitle h2 {display: inline-block !important}

      Delete
    4. Oalah.. sip sudah beres sekarang mbak. Terimakasih bantuannya.

      Delete
  10. Sangat keren penjelasannya cukup memahamkan saya...

    Saya baca sana sini tapi belum aku paham juga....

    Terimakasih mbak

    ReplyDelete
  11. maaf mbak kok punya saya kok malah nggak bisa ya? https://prnt.sc/lk0sy6

    ReplyDelete
    Replies
    1. Nggak bisa di bagian mananya mas? Nggak bisa di-klik? Di Screenshot itu hanya ada masalah di tampilannya (karena pengaruh CSS template)

      Delete
  12. Artikel yang bermanfaat. Berarti setiap membuat postingan baru. TOCnya harus set manual ya mba? Terima kasih.

    ReplyDelete
    Replies
    1. kalau dari mbak igniel emang harus manual tapi ada kok yang otomatis cek di amp linuxblog

      Delete
    2. Iya manual. Karena nggak semua post harus dikasih TOC.

      Delete
  13. maaf mbak ini kenapa malah numpuk 2 di bawah ya https://prnt.sc/luccdp, bisa cek blog saya versi mobile keyword Sidikul

    ReplyDelete
    Replies
    1. Numpuk gimana ya? Di screenshot itu cuma ada tampilan iklan aja.

      Delete
  14. wow mantap mang tapi memang harus punya artikel panjang ya mas

    ReplyDelete
    Replies
    1. Iya. Kalau artikel pendek dikasih TOC malah mggak bagus dan mengganggu.

      Delete
  15. Min, saya sudah menyesuaikan nilai height dan margin nya sesuai dengan ukuran dari header sticky saya. Tapi kenapa tetap tidak pas ya? jadi kelewat gitu h3 nya ketutup sama header.

    solusi nya gimana min biar diklik ngepas?

    trus, yang toc1 pas diklik malah gamau.

    ini link blog nya min > https://bit. ly/2Sj4y4m

    ReplyDelete
    Replies
    1. Pastikan nilai height di kode ini diisi:
      :target::before {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
      Tapi saya cek sekarang udah fix ya.

      Delete
    2. Iya min udah fix. Soalnya kemaren salah nyimpen kode css nya. Harusnya disimpen di atas kode ]]> bukan di atas .

      Terus yang fitur hide/show nya ga berfungsi min, makanya saya hapus aja. Ada solusi ga min?

      Delete
    3. Jangan dulu dihapus. Munculkan lagi biar bisa saya cek.

      Delete
  16. disaya css nya kok gak muncul ya mbak.

    ReplyDelete
    Replies
    1. Mungkin salah nyimpen. Pastikan paste di dalam tag <style> yang ada di dalam tag kondisional halaman post.

      Delete
  17. Cara mengetahui ukuran header dan navigasi dalam website saya bagaimana ya?

    ReplyDelete
    Replies
    1. Coba cek CSS dari navigasinya dan lihat kode 'height'

      Delete
  18. Trimakasih Mbak informasinya sangat berguna sekali

    ReplyDelete
  19. Mbak, dalam pengerjaan artikel berarti harus dalam mode html terus?

    ReplyDelete
  20. Selamay siang mbak igniel... Kenapa tombol hide gk bisa di klik ya. Termia kasih sebelumnya.

    ReplyDelete
  21. kalo diterapin di WP bisa gak mb igniel?

    ReplyDelete
  22. masalah sama nih tombol hide gak bisa di klik.

    cara ngatasinya gimana ya.. makasih

    ReplyDelete
  23. maf mbak itu script ada yng error ya? ane copas semua tapi error, lalu copas dari blog lain malah berhasil/

    ReplyDelete
    Replies
    1. Gak eror. Kalo eror ya demonya gak jalan.

      Delete
  24. mbak, daftar isinya sudah jadi... tapi kok tidak ada pilihan sembunyikan atau tampilkan...
    apa yang salah ya mbak...

    ReplyDelete
    Replies
    1. Ada pengaruh dari CSS template bawaan. Diedit lagi aja CSSnya, sesuaikan sesuai template.

      Delete
    2. hehe., sy gak paham betul css mana yang harus di edit... kebetulan saya pake template viomagz punya mas sugeng... kalau berkenan apakah bisa bantu mbak

      Delete
    3. Cantumkan alamat artikel yang pakai TOC mas.

      Delete
  25. Mantebb nih,, tp kyknya ribet... bodoamat lah tanpa daftar isi juga yang penting pejwan dah wikwikwik

    ReplyDelete
  26. Berhasil kak buatnya, tapi kenapa hasilnya kadang ketika di klik menuju dashbord blogger ya?

    ReplyDelete
  27. Sangat sangat sangat bermanfaat, sekarang blog saya terlihat lebih profesional dengan TOC ini

    ReplyDelete
  28. mbak tolong bantu saya, di punya saya kok daftar isinya ngk keatur rapi ya, tolong cek dong mbk di artikelku yg "Pengertian Access Point". soalnya saya coba di artikel itu.

    ReplyDelete
  29. menambahkan,

    buat yang masih belum kelihatan show/hide nya, pada div yang ada pada compose, buat satu baris. tidak boleh ada enter di sana.

    jadi seperti ini:
    < div> ... < /div>

    bukan seperti ini:
    < div>
    ...
    < /div>

    thanks kak igniel. :)

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>