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

Panduan membuat daftar isi dalam postingan seperti Table of Contents (TOC) Wikipedia menggunakan CSS dan HTML saja tanpa Javascript agar blog mempunyai jump link dalam hasil pencarian SERP.
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> ATAU ]]></b:skin>.

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

142
Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia SEO Friendly
Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia SEO Friendly
Panduan membuat daftar isi dalam postingan seperti Table of Contents (TOC) Wikipedia menggunakan CSS dan HTML saja tanpa Javascript agar blog mempunyai jump link dalam hasil pencarian SERP.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

142 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Syukron Fadillah
    07 September, 2023
    Profil: https://www.blogger.com/profile/14803885499495966113
    mba, apakah ada yang versi otomatisnya?
  • İsmail Şevik
    19 Mei, 2023
    Profil: https://www.blogger.com/profile/02487074348298844362
    If you share an article or information in the automatic table of contents.
  • YOUSHE
    04 April, 2023
    Profil: https://www.blogger.com/profile/13182761570059380388
    sangat terbantu dengan adanya artikel ini. terima kasih ..
  • angka toto
    09 Desember, 2022
    Profil: https://www.blogger.com/profile/18204959064535508732
    makasih gan sudah berbagi ilmu
  • Supar
    05 November, 2022
    Profil: https://www.blogger.com/profile/14268173818994843916
    Bismillah, Terima Kasih atas share ilmunya...
  • Website Murah Surabaya
    06 Oktober, 2022
    Profil: https://www.blogger.com/profile/10211279693102642461
    baru tau caranya
  • kholistembesi
    11 Juli, 2022
    Profil: https://www.blogger.com/profile/00368585227945957609
    Terimakasih min tutorialnya.. sukses diterapkan
  • Pabrik Cold Storage Terbaik dan Termurah
    17 April, 2022
    Profil: https://www.blogger.com/profile/15088647651777471583
    Sangat bermanfaat, terimakasih informasinya.

    Sudah saya terapkan ke blogspot saya dan berhasil.
  • halo halo bandung
    12 Februari, 2022
    Profil: https://www.blogger.com/profile/11902495969836675375
    kak biar bisa otomatis aja gitu gimana ? maksudnya tanpa edit class headingnya, jadi kalo h1 ya jadi sub daftar, kemudian h2 jadi sub daftarnya h1 gitu
  • Jonathan Aldi
    28 Januari, 2022
    Profil: https://www.blogger.com/profile/04978866360479412763
    Thanks, kak. Everything's working as it should.
  • Zahra Pedia
    17 Januari, 2022
    Profil: https://www.blogger.com/profile/02139399398929558198
    Mbak, may tanya, saya make code daftar isi ini. Namun saya pengennya daftar isi tersebut disembunyikan terlebih dahulu, ketika klik menu tampil, baru muncul daftar isinya, bagaimana caranya, terima kasih
  • Albinus Tejo S
    03 Januari, 2022
    Profil: https://www.blogger.com/profile/10096782171600705432
    Mbak Igniel, saya kan ada aplikasikan cara bikin toc otomatis ke template igniplex saya di albinustejos.com

    Nah, setelah toc-nya berjalan lancar, muncul kendala di bagian Related Post yang akhir postingan... jadi loading terus dan gak muncul related post-nya.

    Itu masalahnya dimananya ya mbak?

    Terimakasih banyak sblmx mbak atas responnya nanti.
    • Igniel
      03 Januari, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      TOC otomatisnya pakai Javascript ya? Berarti ada salah penulisan pada script, atau scriptnya bentrok dengan yang sudah ada. Jadi berdampak sama script related post.

      Coba WA saya.
    • Albinus Tejo S
      03 Januari, 2022
      Profil: https://www.blogger.com/profile/10096782171600705432
      kontak WA-nya dimana ya mbak? saya belum punya WA mbak igniel e..

      Selama ini via inbox facebook (messenger) kontakannya...
    • Albinus Tejo S
      05 Januari, 2022
      Profil: https://www.blogger.com/profile/10096782171600705432
      mbak Igniel, saya ada chat via messenger mbak...
  • Kiki Holmes
    22 Desember, 2021
    Profil: https://www.blogger.com/profile/01910153405428570820
    dipasang di template igniplex, gak ada masalah kan kak ini?
  • Muhammad Azhar Nuryadin
    26 September, 2021
    Profil: https://www.blogger.com/profile/08530834330013153753
    Mbak, fitur hidenya tidak bisa digunakan. saat memasukkan kode toc ke dalam artikel, kodenya otomatis terlinebreak ke bawah karena terlalu panjang.
    Apakah ini karena perubahan UI blogger ke versi terbaru ataukah karena template blog yang saya gunakan? kebetulan saya menggunakan template igniplex 2.6. mohon bantuannya.
    https://www.smadgreen.com/2021/03/panduan-lengkap-harvest-moon-back-to-nature.html#toc1
  • Master
    17 Mei, 2021
    Profil: https://www.blogger.com/profile/10582652113899801611
    Mba, kalao misalkan mau ubah bernomor menjadi yang bulet-bulet gimana ya? Udh bagus cuman kurang aja klo pake nomor
  • Unknown
    07 Mei, 2021
    Profil: https://www.blogger.com/profile/11384543152575558460
    #mbak cara merubah besar fontnya serta menghilangkan underlinknya gimana, padahal saya sudah ganti none??
    • Unknown
      07 Mei, 2021
      Profil: https://www.blogger.com/profile/11384543152575558460
      #underline maksudnya
  • Rentifa Zephyr
    05 Mei, 2021
    Profil: https://www.blogger.com/profile/01368362788464905735
    maaf kak saya masih bingung pas edit di html post nya itu gimana cara ganti tulisannya sesuai judul di blog kita ya? Pas diganti malah berantakan semua tulisanya, nulisnya dimana ya?
  • Unknown
    27 April, 2021
    Profil: https://www.blogger.com/profile/14215325890394031700
    mba tombol sembunyikannya gak berfungsi, gimana ya car angatasinya
  • eXthem.Es
    21 Februari, 2021
    Profil: https://www.blogger.com/profile/11428139022007540878
    mantap mba.... masalah saya terselesaikan... salam iblog.my.id
  • Mujib M.
    01 Februari, 2021
    Profil: https://www.blogger.com/profile/11284731455661006765
    Mbak, saya ada masalah pas di artikelnya nggak muncul tombol back to top nya, mohon solusinya mbak, terimakasih.
  • Team Editorial
    08 Desember, 2020
    Profil: https://www.blogger.com/profile/00247891113636878995
    mba gimana caranya supaya tampilan Table of contentnya bisa Sembunyi dulu.

    Kalo ini kan kebalikannya "Tampil > Sembunyi" Saya pengen atur jadi "Sembunyi > Tampil". Gimana caranya mba ?
  • Blogger Kota Tasikmalaya
    28 November, 2020
    Profil: https://www.blogger.com/profile/08377946174228839078
    susah bangetz
  • badboy
    29 Oktober, 2020
    Profil: https://www.blogger.com/profile/02128183368752869211
    ka kalo mau tampilannya di balik jadi content nya di sembunyikan dulu bisa ngak css gimana ka thanks
  • Climate4life
    07 Oktober, 2020
    Profil: https://www.blogger.com/profile/03747017448251208612
    Terima kasih mb Igniel, saya memasangnya pada blog saya. Mau nanya jika kita buka draft lagi kok menu sembunyikan gak jalan ya. Setelah saya cek ada yang berubah sendiri pada baris

    input type="checkbox" role="button" id="toctoggle" class="toctoggle"><div class="toctitle"
    Jadi kita harus ngopi ulang baris aslinya.
  • Very Handika
    14 September, 2020
    Profil: https://www.blogger.com/profile/14998260345863476722
    supaya tidak memuat halaman lagi saat klik link toc nya gimana ( ini terjadi di versi mobile)
  • Dandy Dwi Putra Handho
    17 Agustus, 2020
    Profil: https://www.blogger.com/profile/17652694451044666363
    terima kasih banyak atas sharing pengetahuannya mbak igniel, semoga Allah memberkahi usaha mbak, dan dilancarkan rezekinya
  • Berbagilmu
    07 Agustus, 2020
    Profil: https://www.blogger.com/profile/00449628215718477315
    Kalo jump linknya berhasil.. tapi tetep gak bisa di hide mbak padahal gak di line break ..trus knapa ya judulnya jadi ilang tapi paragrafnya ada? Mohon bantuannya mbak🙇‍♂️🙏
  • Hendra Yulisman
    02 Juli, 2020
    Profil: https://www.blogger.com/profile/08697633679451656274
    Mantap banget gan..
    Thanks atas sharingnya
  • Takiman
    27 Juni, 2020
    Profil: https://www.blogger.com/profile/07103022411418617182
    terimakasih atas ilmunya
  • Ade Andika
    15 Juni, 2020
    Profil: https://www.blogger.com/profile/11787651415983269465
    Mba igniel, Daftar isi saya kok gk bisa link ke header Post nya ya dan klik " sembunyikan " tidak berfungsi. mohon arahan dan bantuannya.
    Ini Artikel nya...

    #https://danurputra.blogspot.com/2020/06/The-Beginners-Di-Dunia-Kontraktor-MEP.html {margin:0 padding:10px 15px
  • Unknown
  • Unknown
  • instastorybali
    18 Mei, 2020
    Profil: https://www.blogger.com/profile/05551021718409018873
    mbak igniel kok tocnya agak gak tepat pas klik headernya ya ?
  • First Guardian
    16 Mei, 2020
    Profil: https://www.blogger.com/profile/12059417453824224704
    terima kasih kak,di blog saya "sembunyikan" nya ada tapi tidak bisa di klik itu bagaimana yah?
    • First Guardian
      22 Mei, 2020
      Profil: https://www.blogger.com/profile/12059417453824224704
      Ganti pertanyaan,penyebab tombol sembunyikannya tidak bisa diklik karena kode for="toctoggle" nya hilang.Kenapa yah kadang hilang padahal sudah dimasukkan
  • Andri Berbudi
    17 April, 2020
    Profil: https://www.blogger.com/profile/16818304693905828783
    Suwun kak infonya...
  • Mas Can
    16 April, 2020
    Profil: https://www.blogger.com/profile/00842133782593715915
    Awalnya saya bingung bangey untuk membuat toc ini, namun setelah menerapakan apa yang ada disini, blog saya akhirnya ada toc nya 😂

    Trimakasih mas dan mbak ignile
  • Bertips.com
    19 Maret, 2020
    Profil: https://www.blogger.com/profile/14661712935316876785
    mbak brahasil tapi di klik gamau loncat ke nomor sekian di artikelnya knapa ya kan udah di kasih tag pemanggil id

    demo: https://bussid.apkd.me/2019/06/9-koleksi-livery-kupu-kupu-ayu-jb3-shd.html
    • Igniel
      19 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di bagian h2 gak perlu pakai tanda pagar lagi. Blogmu masih gini:
      <h2 id="#toc1">
      Harusnya gini:
      <h2 id="toc1">
    • Bertips.com
      19 Maret, 2020
      Profil: https://www.blogger.com/profile/14661712935316876785
      oh iya udah bisa :v # lupa di hapus di tag id='#toc1' jadi id='toc1' .. maklum rokok abis mbk thanks sangat bermanfaat artikelnya
    • Bertips.com
      19 Maret, 2020
      Profil: https://www.blogger.com/profile/14661712935316876785
      iya hehe maaf mbak . :)
  • zoetami
    27 Februari, 2020
    Profil: https://www.blogger.com/profile/13339341516839172495
    Terimakasih ya kak niel
  • Technophoria
    13 Februari, 2020
    Profil: https://www.blogger.com/profile/00761775670362178505
    Hai mbak, bisa editkan script ini supaya bisa TOC otomatis dan mirip tutorial TOC disini. cek ini mbak https://bibit.ws/toc-di-blogspot.php
  • ddmusikus
    04 Februari, 2020
    Profil: https://www.blogger.com/profile/07688911285442150453
    Halo mba Ignil. mau tanya, kalo CSS nya saya taruh bersama postingan di edit html ga di template, maksudnya supaya mudah saja mau utak atik lagi CSS nya saat buat postingan ga apa ya? Atau apa bedanya untuk CSS nya kalo saya taruh di template? trima kasih
  • Admin
    03 Februari, 2020
    Profil: https://www.blogger.com/profile/13217077998798539778
    mbak toc nya udah muncul, tapi kenapa ya widget sidebarnya malah pindah ke bawah....mhon pencerahannya mbak...thanks
  • Dodi Insan Kamil
    25 Januari, 2020
    Profil: https://www.blogger.com/profile/02087734579255885483
    gan kok pas bagian tombol sembunyikannya, kok gk mucul yah? itu kira2 kenapa? padahal gua udah ngikutin semua langkah di atas?
  • Dodi Insan Kamil
    25 Januari, 2020
    Profil: https://www.blogger.com/profile/02087734579255885483
    mantap gan, thanks infonya.
  • Sem
    19 Desember, 2019
    Profil: https://www.blogger.com/profile/06500227141064544117
    halo mbak igniel, kira2 ini bisa otomatis hide dulu gak ya? kalo diklik baru tampil daftar isinya..

    terimakasih
  • arfan fahrudin
    16 November, 2019
    Profil: https://www.blogger.com/profile/08693793984999629348
    makasih gan... tak coba dulu ya.. ijin praktik
  • Ali Said, ST
    12 November, 2019
    Profil: https://www.blogger.com/profile/12503268688610706246
    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
  • Tempat Jasa Sewa HT GSM Rental Handy Talky POC Walkie Talkie 4G Penyewaan Speaker Portable Sound System Mic Wireless Clip On Headset Microphone Screen LCD Prjector Alat Live Streaming Buat Emailku 9
    07 Oktober, 2019
    Profil: https://www.blogger.com/profile/11639086389141434818
    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
    • Igniel
      07 Oktober, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
    • Tempat Jasa Sewa HT GSM Rental Handy Talky POC Walkie Talkie 4G Penyewaan Speaker Portable Sound System Mic Wireless Clip On Headset Microphone Screen LCD Prjector Alat Live Streaming Buat Emailku 9
      08 Oktober, 2019
      Profil: https://www.blogger.com/profile/11639086389141434818
      Terima kasih Mbak
    • Tempat Jasa Sewa HT GSM Rental Handy Talky POC Walkie Talkie 4G Penyewaan Speaker Portable Sound System Mic Wireless Clip On Headset Microphone Screen LCD Prjector Alat Live Streaming Buat Emailku 9
      08 Oktober, 2019
      Profil: https://www.blogger.com/profile/11639086389141434818
      Mbak maaf cara hapus atau edit komentar di sini bagaimana ya?
  • Isfan Fajar Hawari
    17 September, 2019
    Profil: https://www.blogger.com/profile/02197124726142864736
    mantap thanks infonya gan
  • Mas Malik
    11 September, 2019
    Profil: https://www.blogger.com/profile/03477114568419149604
    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}
    • Mujib M.
      01 Februari, 2021
      Profil: https://www.blogger.com/profile/11284731455661006765
      Di elemen input, agan masukin "checked"
  • Aldi Pramudiya
    07 September, 2019
    Profil: https://www.blogger.com/profile/07180222252202438707
    Mba ini tombol hide nya hilang
    • Igniel
      08 September, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan pake spasi / line break sesuai petunjuk di tutorial.
  • Mas Rinaldo
    04 September, 2019
    Profil: https://www.blogger.com/profile/17662018961542762845
    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
    • Igniel
      04 September, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Di atas ada penjelasannya lho mas, di bagian CSS untuk kode :target::before. Silakan dibaca lagi ya.
    • Mas Rinaldo
      05 September, 2019
      Profil: https://www.blogger.com/profile/17662018961542762845
      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?
    • Mas Rinaldo
      05 September, 2019
      Profil: https://www.blogger.com/profile/17662018961542762845
      dan juga kalau di klik, fiturny ga fungsi.
  • SUPRAPTO
    29 Agustus, 2019
    Profil: https://www.blogger.com/profile/00356781236737261330
    Terima kasih tutorialnya. Setelah beberapa kali coba, akhirnya bisa terpasang.
  • Reza Harahap
    09 Agustus, 2019
    Profil: https://www.blogger.com/profile/16216454999014453285
    mba, kalau diaplikasikan di tema viomagz kok gak work ya css nya?
  • Muryo Setyo
    09 Agustus, 2019
    Profil: https://www.blogger.com/profile/03091448032316357766
    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
  • putra
    09 Agustus, 2019
    Profil: https://www.blogger.com/profile/12926860471914749951
    hallo mbak,, saya pengguna viomagz, kenapa ya daftar isinya suka spasi sendiri, padahal sudah saya update biar sejajar, tapi otomatis malah ngasih spasi sendiri?
  • Tri Winoto
    21 Juli, 2019
    Profil: https://www.blogger.com/profile/18034531854908857698
    Mantap patut di coba, nyari-nyari totur ini ahirnya ketemu juga
  • Blogdet
    18 Juli, 2019
    Profil: https://www.blogger.com/profile/17435255036324838775
    Maksudnya elemen pemanggilnya itu yg bagaiman sist?
    Dan contohnya bagaimana kalau di bikin postingan seperti ini?

    Terima kasih
  • Dhanny
    18 Juli, 2019
    Profil: https://www.blogger.com/profile/03455097694318571030
    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..
  • Dian Arifin
    12 Juli, 2019
    Profil: https://www.blogger.com/profile/15810379068982398950
    suka sama template yg kamu poakai KEREN <3
  • read and write
    04 Juli, 2019
    Profil: https://www.blogger.com/profile/03123705047282326193
    nice article gan..
  • simbahgugel
    28 Mei, 2019
    Profil: https://www.blogger.com/profile/09057841879444034907
    mbak di punya saya kok ga bisa di klik ya, permasalahn nya dmn ? saya pke template kompiflex
    • simbahgugel
      28 Mei, 2019
      Profil: https://www.blogger.com/profile/09057841879444034907
      ehh udah denk.,ad yg kurang td.. dah fix. thank mbak igniel.... mntappp
  • Rich Ard
    30 April, 2019
    Profil: https://www.blogger.com/profile/08181588658968702674
    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. :)
  • Marwanto606
    28 April, 2019
    Profil: https://www.blogger.com/profile/08121214626662227183
    ijin coba bang :d
  • Rizky Andrea
    23 April, 2019
    Profil: https://www.blogger.com/profile/02243082962115449583
    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.
  • Rona Febriana
    07 April, 2019
    Profil: https://www.blogger.com/profile/17134485008733382969
    Sangat sangat sangat bermanfaat, sekarang blog saya terlihat lebih profesional dengan TOC ini
  • Rahmad Hidayat
    17 Maret, 2019
    Profil: https://www.blogger.com/profile/10175035610753474132
    Berhasil kak buatnya, tapi kenapa hasilnya kadang ketika di klik menuju dashbord blogger ya?
  • Gisella Preswita
    17 Maret, 2019
    Profil: https://www.blogger.com/profile/09868004341871323599
    Mantebb nih,, tp kyknya ribet... bodoamat lah tanpa daftar isi juga yang penting pejwan dah wikwikwik
  • Mas Tris
    11 Maret, 2019
    Profil: https://www.blogger.com/profile/16737817068415954951
    mbak, daftar isinya sudah jadi... tapi kok tidak ada pilihan sembunyikan atau tampilkan...
    apa yang salah ya mbak...
    • Igniel
      12 Maret, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada pengaruh dari CSS template bawaan. Diedit lagi aja CSSnya, sesuaikan sesuai template.
    • Mas Tris
      18 Maret, 2019
      Profil: https://www.blogger.com/profile/16737817068415954951
      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
    • Igniel
      07 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cantumkan alamat artikel yang pakai TOC mas.
    • La Sidin
      02 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      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
    • Igniel
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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>
    • La Sidin
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/13465444834119799778
      Alhamdulillah sudah bisa. Terimaksih banyak.
    • Tempat Jasa Sewa HT GSM Rental Handy Talky POC Walkie Talkie 4G Penyewaan Speaker Portable Sound System Mic Wireless Clip On Headset Microphone Screen LCD Prjector Alat Live Streaming Buat Emailku 9
      08 Oktober, 2019
      Profil: https://www.blogger.com/profile/11639086389141434818
      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.
  • Technophoria
    28 Februari, 2019
    Profil: https://www.blogger.com/profile/00761775670362178505
    maf mbak itu script ada yng error ya? ane copas semua tapi error, lalu copas dari blog lain malah berhasil/
    • Igniel
      28 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak eror. Kalo eror ya demonya gak jalan.
  • Dedikurnia.id
    28 Februari, 2019
    Profil: https://www.blogger.com/profile/00724320062138943313
    masalah sama nih tombol hide gak bisa di klik.

    cara ngatasinya gimana ya.. makasih
    • Igniel
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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>
  • Deny Ir
    25 Februari, 2019
    Profil: https://www.blogger.com/profile/00591089399119824664
    kalo diterapin di WP bisa gak mb igniel?
  • Aditya Riyan
    11 Februari, 2019
    Profil: https://www.blogger.com/profile/07747578564727201534
    Selamay siang mbak igniel... Kenapa tombol hide gk bisa di klik ya. Termia kasih sebelumnya.
    • Igniel
      18 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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>
  • Damiri
    08 Februari, 2019
    Profil: https://www.blogger.com/profile/06454209567293477813
    Mbak, dalam pengerjaan artikel berarti harus dalam mode html terus?
  • Bambang Pamadya
    05 Februari, 2019
    Profil: https://www.blogger.com/profile/01109698430018599718
    Trimakasih Mbak informasinya sangat berguna sekali
  • Misa
    02 Februari, 2019
    Profil: https://www.blogger.com/profile/14340217526686888794
    Cara mengetahui ukuran header dan navigasi dalam website saya bagaimana ya?
    • Igniel
      09 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba cek CSS dari navigasinya dan lihat kode 'height'
  • Admin S
    29 Januari, 2019
    Profil: https://www.blogger.com/profile/14978317994271104391
    disaya css nya kok gak muncul ya mbak.
    • Igniel
      30 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Mungkin salah nyimpen. Pastikan paste di dalam tag <style> yang ada di dalam tag kondisional halaman post.
  • Taufiq
    24 Desember, 2018
    Profil: https://www.blogger.com/profile/02707405696459064619
    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
    • Igniel
      29 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
    • Taufiq
      29 Desember, 2018
      Profil: https://www.blogger.com/profile/02707405696459064619
      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?

    • Igniel
      08 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan dulu dihapus. Munculkan lagi biar bisa saya cek.
  • Anonim
    Anonim15 Desember, 2018
    wow mantap mang tapi memang harus punya artikel panjang ya mas
    • Igniel
      19 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya. Kalau artikel pendek dikasih TOC malah mggak bagus dan mengganggu.
  • Pediaku
    13 Desember, 2018
    Profil: https://www.blogger.com/profile/00374823826946390306
    maaf mbak ini kenapa malah numpuk 2 di bawah ya https://prnt.sc/luccdp, bisa cek blog saya versi mobile keyword Sidikul
    • Igniel
      29 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Numpuk gimana ya? Di screenshot itu cuma ada tampilan iklan aja.
  • Helmi Arrazi
    05 Desember, 2018
    Profil: https://www.blogger.com/profile/09568869941952391466
    Artikel yang bermanfaat. Berarti setiap membuat postingan baru. TOCnya harus set manual ya mba? Terima kasih.
    • Pediaku
      06 Desember, 2018
      Profil: https://www.blogger.com/profile/00374823826946390306
      kalau dari mbak igniel emang harus manual tapi ada kok yang otomatis cek di amp linuxblog
    • Igniel
      06 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya manual. Karena nggak semua post harus dikasih TOC.
  • Pediaku
    19 November, 2018
    Profil: https://www.blogger.com/profile/00374823826946390306
    maaf mbak kok punya saya kok malah nggak bisa ya? https://prnt.sc/lk0sy6
    • Igniel
      10 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak bisa di bagian mananya mas? Nggak bisa di-klik? Di Screenshot itu hanya ada masalah di tampilannya (karena pengaruh CSS template)
  • Kang Mursidi
    18 November, 2018
    Profil: https://www.blogger.com/profile/11337401997621485929
    Sangat keren penjelasannya cukup memahamkan saya...

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

    Terimakasih mbak
  • Tedi Eka
    17 November, 2018
    Profil: https://www.blogger.com/profile/17195151981500818409
    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
    • Igniel
      10 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tambahkan CSS ini:
      .toctitle h2 {display: inline-block}
    • Tedi Eka
      24 Desember, 2018
      Profil: https://www.blogger.com/profile/17195151981500818409
      Masih gak berfungsi mbak, tetap css yang di .post-body h2 nya yang terbaca. Padahal sudah dikasih parameter class.
    • Igniel
      24 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba kasih important ya.
      .toctitle h2 {display: inline-block !important}
    • Tedi Eka
      24 Desember, 2018
      Profil: https://www.blogger.com/profile/17195151981500818409
      Oalah.. sip sudah beres sekarang mbak. Terimakasih bantuannya.
  • Tedi Eka
    17 November, 2018
    Profil: https://www.blogger.com/profile/17195151981500818409
    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
    • Igniel
      17 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada pengaruh dari CSS template kayanya. Alamat blognya apa?
  • opop nomi
    09 November, 2018
    Profil: https://www.blogger.com/profile/12920643698799957797
    ini supprt untuk AMP tidak kak, lalu itu #TOC bisa di ganti atau tidak?
    • Igniel
      09 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Support karena cuma CSS dan HTML aja tanpa Javascript.
      Iya #toc bisa diganti namanya.
  • Alan Pebriano
    05 November, 2018
    Profil: https://www.blogger.com/profile/17311865695079845555
    eh sudah bisa hehe. punya saya pakai sticky header ternyata :3
  • Alan Pebriano
    05 November, 2018
    Profil: https://www.blogger.com/profile/17311865695079845555
    hallo mbak igniel, tanya dong..
    aku udah terapin tapi kok pas di klik mengarahnya melebihi heading 2 yang aku set ya?
  • Alan Pebriano
    03 November, 2018
    Profil: https://www.blogger.com/profile/17311865695079845555
    Mantepp! Nanti sy coba deh di blog sy :) thanks mbak igniel
  • Enjay Tarigan
    20 Oktober, 2018
    Profil: https://www.blogger.com/profile/03806940624036244272
    kalau sticky di mobile.
    dan tidak sticky di pc gimana itu mbak?

    apakah bisa?
    • Igniel
      01 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa. Tapi buat apa TOC dijadikan sticky? Nanti malah mengganggu.
    • Master
      19 Juni, 2021
      Profil: https://www.blogger.com/profile/10582652113899801611
      Mba tombol tampil/sembunyikan kadang gak berfungsi (gak bisa buka tutup TOC). Ini cara atasinya gimana ya
    • Jonathan Aldi
      28 Januari, 2022
      Profil: https://www.blogger.com/profile/04978866360479412763
      Iya, TOC ku juga gabisa disembunyikan 😭
  • Masran Jamsari Redha
    09 September, 2018
    Profil: https://www.blogger.com/profile/12217686819778425001
    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...
  • Angga 4Lima
    01 September, 2018
    Profil: https://www.blogger.com/profile/07899115751434847491
    makasih gan tutorialnya, sangat membantu