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.



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>

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!

SHARE Pin Share
Artikel Terkait
85 komentar
  1. makasih gan tutorialnya, sangat membantu

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

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

    apakah bisa?

    BalasHapus
    Balasan
    1. Bisa. Tapi buat apa TOC dijadikan sticky? Nanti malah mengganggu.

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

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

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

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

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

      Hapus
  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

    BalasHapus
    Balasan
    1. Ada pengaruh dari CSS template kayanya. Alamat blognya apa?

      Hapus
  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

    BalasHapus
    Balasan
    1. Tambahkan CSS ini:
      .toctitle h2 {display: inline-block}

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

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

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

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

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

    Terimakasih mbak

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

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

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

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

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

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

    BalasHapus
    Balasan
    1. Numpuk gimana ya? Di screenshot itu cuma ada tampilan iklan aja.

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

    BalasHapus
    Balasan
    1. Iya. Kalau artikel pendek dikasih TOC malah mggak bagus dan mengganggu.

      Hapus
  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

    BalasHapus
    Balasan
    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.

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

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

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

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

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

    BalasHapus
    Balasan
    1. Coba cek CSS dari navigasinya dan lihat kode 'height'

      Hapus
  18. Trimakasih Mbak informasinya sangat berguna sekali

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

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

    BalasHapus
    Balasan
    1. Jangan ada line break (enter) di bagian header. Harus satu baris semua 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>

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

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

    cara ngatasinya gimana ya.. makasih

    BalasHapus
    Balasan
    1. Jangan ada line break (enter) di bagian header. Harus satu baris semua 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>

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

    BalasHapus
    Balasan
    1. Gak eror. Kalo eror ya demonya gak jalan.

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

    BalasHapus
    Balasan
    1. Ada pengaruh dari CSS template bawaan. Diedit lagi aja CSSnya, sesuaikan sesuai template.

      Hapus
    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

      Hapus
    3. Cantumkan alamat artikel yang pakai TOC mas.

      Hapus
    4. Kebetulan saya juga pake viomagz dan mengalami masalah yang sama, yaitu tombol sembunyikan dan tampilkan tidak muncul.

      Ini artikel di blog percobaan saya

      https://archytips.blogspot.com/2019/06/contoh-daftar-isi.html#toc1

      Hapus
    5. Jangan ada line break (enter) di bagian header. Harus satu baris semua 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>

      Hapus
    6. Alhamdulillah sudah bisa. Terimaksih banyak.

      Hapus
    7. Mas saya juga VioMagz namun belum bisa kalau dilkik judulnya tertutup/

      Aaya lihat di Blog https://archytips.blogspot.com/2019/06/contoh-daftar-isi.html#toc1 sudah berhasil.

      Boleh berbagi apa ada tambahkan atau diedit bagaimana?

      Ini milik saya
      https://www.sewahtdijakartabarat.com/2019/10/sewa-ht-di-jakarta-dengan-harga-murah.html#toc1

      Mohon bantuan.

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

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

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

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

    BalasHapus
  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. :)

    BalasHapus
  30. mbak di punya saya kok ga bisa di klik ya, permasalahn nya dmn ? saya pke template kompiflex

    BalasHapus
    Balasan
    1. ehh udah denk.,ad yg kurang td.. dah fix. thank mbak igniel.... mntappp

      Hapus
  31. suka sama template yg kamu poakai KEREN <3

    BalasHapus
  32. Kalau pakai css ini jangan sekali2 ke HTML tab
    /* 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>

    header otomatis di rapiin sama blogger *garuk2*
    tq cssnya mbak..

    BalasHapus
  33. Maksudnya elemen pemanggilnya itu yg bagaiman sist?
    Dan contohnya bagaimana kalau di bikin postingan seperti ini?

    Terima kasih

    BalasHapus
  34. Mantap patut di coba, nyari-nyari totur ini ahirnya ketemu juga

    BalasHapus
  35. hallo mbak,, saya pengguna viomagz, kenapa ya daftar isinya suka spasi sendiri, padahal sudah saya update biar sejajar, tapi otomatis malah ngasih spasi sendiri?

    BalasHapus
  36. kok punya saya tidak bisa di klik ya mb? contohnya ini yg tak buat http://www.muryosetyo.com/2019/08/model-dan-metode-pembelajaran-abad-21.html

    BalasHapus
  37. mba, kalau diaplikasikan di tema viomagz kok gak work ya css nya?

    BalasHapus
  38. Terima kasih tutorialnya. Setelah beberapa kali coba, akhirnya bisa terpasang.

    BalasHapus
  39. mbak,kok link nya kok lewat dari ID ya ketika di klik. saya klik h2,tetapi yang tampil lewat dari h2. bukan pas di h2 nya

    BalasHapus
    Balasan
    1. Di atas ada penjelasannya lho mas, di bagian CSS untuk kode :target::before. Silakan dibaca lagi ya.

      Hapus
    2. oke makasih mbak itu udah fix.
      tapi skrang, kadang fiturnya kok pas di klik malah ke dasbord blog kita sendiri ya. udh di hapus id di htmlnya. ketika di perbaharui,muncul lagi masalah itu?

      Hapus
    3. dan juga kalau di klik, fiturny ga fungsi.

      Hapus
  40. Mba ini tombol hide nya hilang

    BalasHapus
    Balasan
    1. Jangan pake spasi / line break sesuai petunjuk di tutorial.

      Hapus
  41. kak . . kalau fungsinya di balik cssnya gmn ? jadi langsung hidden . . baru setelah di cecked kebuka. . mohon bantuannya kakak hehe

    cara nulis cssnya gmn


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

    BalasHapus
  42. Mbak terima kasih artikelnya.
    Namun kami memasang saat klik tidak muncul pas, ada yang hilang.
    Mohon petunjuk. Terima

    https://www.sewahtdijakartabarat.com/2019/10/sewa-ht-di-jakarta-dengan-harga-murah.html#toc1

    BalasHapus
    Balasan
    1. Saya cek muncul kok. Maksudnya posisi scroll saat di-klik kurang ke bawah karena tertutup menu navigasi? Coba baca lagi artikelnya. Di sana sudah dijelaskan mengenai penambahan margin. Di bagian CSS.

      Hapus
    2. Mbak maaf cara hapus atau edit komentar di sini bagaimana ya?

      Hapus
  43. setelah saya terapkan, kok muncul peringatan...tap targets are not sized appropriattely di lighthouse yah?..ada cara ngak agar table content nya bisa 100 persen SEO ... terima kasih sebelumnya atas tutorialnya

    BalasHapus
  44. makasih gan... tak coba dulu ya.. ijin praktik

    BalasHapus

Posting Komentar