Membuat Daftar Isi Seperti Table of Contents (TOC) Wikipedia 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> 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.

Artikel Terkait

135 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Pabrik Cold Storage Terbaik dan Termurah
    17/4/22
    Profil: https://www.blogger.com/profile/15088647651777471583
    Sangat bermanfaat, terimakasih informasinya.

    Sudah saya terapkan ke blogspot saya dan berhasil.
  • halo halo bandung
    12/2/22
    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
  • Aditya
    28/1/22
    Profil: https://www.blogger.com/profile/04978866360479412763
    Thanks, kak. Everything's working as it should.
  • Zahra Pedia
    17/1/22
    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
    3/1/22
    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
      3/1/22
      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
      3/1/22
      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
      5/1/22
      Profil: https://www.blogger.com/profile/10096782171600705432
      mbak Igniel, saya ada chat via messenger mbak...
  • Kiki Holmes
    22/12/21
    Profil: https://www.blogger.com/profile/01910153405428570820
    dipasang di template igniplex, gak ada masalah kan kak ini?
  • Muhammad Azhar Nuryadin
    26/9/21
    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
    • Kiki Holmes
      22/12/21
      Profil: https://www.blogger.com/profile/01910153405428570820
      ditunggu jawaban ini
  • ཞıʄզı ąƖʄı
    17/5/21
    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
    7/5/21
    Profil: https://www.blogger.com/profile/11384543152575558460
    #mbak cara merubah besar fontnya serta menghilangkan underlinknya gimana, padahal saya sudah ganti none??
    • Unknown
      7/5/21
      Profil: https://www.blogger.com/profile/11384543152575558460
      #underline maksudnya
  • Rentifa Zephyr
    5/5/21
    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/4/21
    Profil: https://www.blogger.com/profile/14215325890394031700
    mba tombol sembunyikannya gak berfungsi, gimana ya car angatasinya
  • eXthem.Es
    21/2/21
    Profil: https://www.blogger.com/profile/11428139022007540878
    mantap mba.... masalah saya terselesaikan... salam iblog.my.id
  • Mujib M.
    1/2/21
    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.
    • Mujib M.
      1/2/21
      Profil: https://www.blogger.com/profile/11284731455661006765
      Ehh udah bisa mbak wkwk
  • Team Editorial
    8/12/20
    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/11/20
    Profil: https://www.blogger.com/profile/08377946174228839078
    susah bangetz
  • badboy
    29/10/20
    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
  • B'Day | Climate4life
    7/10/20
    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/9/20
    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/8/20
    Profil: https://www.blogger.com/profile/17652694451044666363
    terima kasih banyak atas sharing pengetahuannya mbak igniel, semoga Allah memberkahi usaha mbak, dan dilancarkan rezekinya
  • Anotherways
    7/8/20
    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
    2/7/20
    Profil: https://www.blogger.com/profile/08697633679451656274
    Mantap banget gan..
    Thanks atas sharingnya
  • Takiman
    27/6/20
    Profil: https://www.blogger.com/profile/07103022411418617182
    terimakasih atas ilmunya
  • Ade Andika
    15/6/20
    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/5/20
    Profil: https://www.blogger.com/profile/05551021718409018873
    mbak igniel kok tocnya agak gak tepat pas klik headernya ya ?
  • First Guardian
    16/5/20
    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/5/20
      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/4/20
    Profil: https://www.blogger.com/profile/16818304693905828783
    Suwun kak infonya...
  • Mas Can
    16/4/20
    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/3/20
    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/3/20
      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/3/20
      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/3/20
      Profil: https://www.blogger.com/profile/14661712935316876785
      iya hehe maaf mbak . :)
  • Zoetami
    27/2/20
    Profil: https://www.blogger.com/profile/13339341516839172495
    Terimakasih ya kak niel
  • koekeo
    13/2/20
    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
    4/2/20
    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
  • Dwi Herawati S
    3/2/20
    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/1/20
    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/1/20
    Profil: https://www.blogger.com/profile/02087734579255885483
    mantap gan, thanks infonya.
  • Sem
    19/12/19
    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/11/19
    Profil: https://www.blogger.com/profile/08693793984999629348
    makasih gan... tak coba dulu ya.. ijin praktik
  • Ali Said, ST
    12/11/19
    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
    7/10/19
    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
      7/10/19
      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
      8/10/19
      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
      8/10/19
      Profil: https://www.blogger.com/profile/11639086389141434818
      Mbak maaf cara hapus atau edit komentar di sini bagaimana ya?
  • Isfan Fajar Hawari
    17/9/19
    Profil: https://www.blogger.com/profile/02197124726142864736
    mantap thanks infonya gan
  • Mas Malik
    11/9/19
    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.
      1/2/21
      Profil: https://www.blogger.com/profile/11284731455661006765
      Di elemen input, agan masukin "checked"
  • Aldi Pramudiya
    7/9/19
    Profil: https://www.blogger.com/profile/07180222252202438707
    Mba ini tombol hide nya hilang
    • Igniel
      8/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan pake spasi / line break sesuai petunjuk di tutorial.
  • Mas Rinaldo
    4/9/19
    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
      4/9/19
      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
      5/9/19
      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
      5/9/19
      Profil: https://www.blogger.com/profile/17662018961542762845
      dan juga kalau di klik, fiturny ga fungsi.
  • SUPRAPTO
    29/8/19
    Profil: https://www.blogger.com/profile/00356781236737261330
    Terima kasih tutorialnya. Setelah beberapa kali coba, akhirnya bisa terpasang.
  • rezaharahap
    9/8/19
    Profil: https://www.blogger.com/profile/16216454999014453285
    mba, kalau diaplikasikan di tema viomagz kok gak work ya css nya?
  • Muryo Setyo
    9/8/19
    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
    9/8/19
    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/7/19
    Profil: https://www.blogger.com/profile/18034531854908857698
    Mantap patut di coba, nyari-nyari totur ini ahirnya ketemu juga
  • blogdet
    18/7/19
    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/7/19
    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/7/19
    Profil: https://www.blogger.com/profile/15810379068982398950
    suka sama template yg kamu poakai KEREN <3
  • read and write
    4/7/19
    Profil: https://www.blogger.com/profile/03123705047282326193
    nice article gan..
  • simbahgugel
    28/5/19
    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/5/19
      Profil: https://www.blogger.com/profile/09057841879444034907
      ehh udah denk.,ad yg kurang td.. dah fix. thank mbak igniel.... mntappp
  • Rich Ard
    30/4/19
    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/4/19
    Profil: https://www.blogger.com/profile/08121214626662227183
    ijin coba bang :d
  • Rizky Andrea
    23/4/19
    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
    7/4/19
    Profil: https://www.blogger.com/profile/17134485008733382969
    Sangat sangat sangat bermanfaat, sekarang blog saya terlihat lebih profesional dengan TOC ini
  • Rahmad Hidayat
    17/3/19
    Profil: https://www.blogger.com/profile/10175035610753474132
    Berhasil kak buatnya, tapi kenapa hasilnya kadang ketika di klik menuju dashbord blogger ya?
  • Gisella Preswita
    17/3/19
    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/3/19
    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/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada pengaruh dari CSS template bawaan. Diedit lagi aja CSSnya, sesuaikan sesuai template.
    • Mas Tris
      18/3/19
      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
      7/4/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Cantumkan alamat artikel yang pakai TOC mas.
    • La Sidin
      2/6/19
      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/6/19
      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/6/19
      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
      8/10/19
      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.
  • koekeo
    28/2/19
    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/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Gak eror. Kalo eror ya demonya gak jalan.
  • DhedyKurnia
    28/2/19
    Profil: https://www.blogger.com/profile/00724320062138943313
    masalah sama nih tombol hide gak bisa di klik.

    cara ngatasinya gimana ya.. makasih
    • Igniel
      18/6/19
      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/2/19
    Profil: https://www.blogger.com/profile/00591089399119824664
    kalo diterapin di WP bisa gak mb igniel?
    • Igniel
      25/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sangat bisa
  • Aditya Riyan
    11/2/19
    Profil: https://www.blogger.com/profile/07747578564727201534
    Selamay siang mbak igniel... Kenapa tombol hide gk bisa di klik ya. Termia kasih sebelumnya.
    • Igniel
      18/6/19
      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
    8/2/19
    Profil: https://www.blogger.com/profile/06454209567293477813
    Mbak, dalam pengerjaan artikel berarti harus dalam mode html terus?
    • Igniel
      9/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya mas.
  • Bambang Pamadya
    5/2/19
    Profil: https://www.blogger.com/profile/01109698430018599718
    Trimakasih Mbak informasinya sangat berguna sekali
  • Misa
    2/2/19
    Profil: https://www.blogger.com/profile/14340217526686888794
    Cara mengetahui ukuran header dan navigasi dalam website saya bagaimana ya?
    • Igniel
      9/2/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba cek CSS dari navigasinya dan lihat kode 'height'
  • Satria N
    29/1/19
    Profil: https://www.blogger.com/profile/14978317994271104391
    disaya css nya kok gak muncul ya mbak.
    • Igniel
      30/1/19
      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/12/18
    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/12/18
      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/12/18
      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
      8/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jangan dulu dihapus. Munculkan lagi biar bisa saya cek.
  • Cayo Indonesia
    15/12/18
    Profil: https://www.blogger.com/profile/11646236127326854177
    wow mantap mang tapi memang harus punya artikel panjang ya mas
    • Igniel
      19/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya. Kalau artikel pendek dikasih TOC malah mggak bagus dan mengganggu.
  • Pediaku
    13/12/18
    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/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Numpuk gimana ya? Di screenshot itu cuma ada tampilan iklan aja.
  • Helmi Arrazi
    5/12/18
    Profil: https://www.blogger.com/profile/09568869941952391466
    Artikel yang bermanfaat. Berarti setiap membuat postingan baru. TOCnya harus set manual ya mba? Terima kasih.
    • Pediaku
      6/12/18
      Profil: https://www.blogger.com/profile/00374823826946390306
      kalau dari mbak igniel emang harus manual tapi ada kok yang otomatis cek di amp linuxblog
    • Igniel
      6/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya manual. Karena nggak semua post harus dikasih TOC.
  • Pediaku
    19/11/18
    Profil: https://www.blogger.com/profile/00374823826946390306
    maaf mbak kok punya saya kok malah nggak bisa ya? https://prnt.sc/lk0sy6
    • Igniel
      10/12/18
      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/11/18
    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/11/18
    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/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tambahkan CSS ini:
      .toctitle h2 {display: inline-block}
    • Tedi Eka
      24/12/18
      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/12/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba kasih important ya.
      .toctitle h2 {display: inline-block !important}
    • Tedi Eka
      24/12/18
      Profil: https://www.blogger.com/profile/17195151981500818409
      Oalah.. sip sudah beres sekarang mbak. Terimakasih bantuannya.
  • Tedi Eka
    17/11/18
    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/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada pengaruh dari CSS template kayanya. Alamat blognya apa?
  • opop nomi
    9/11/18
    Profil: https://www.blogger.com/profile/12920643698799957797
    ini supprt untuk AMP tidak kak, lalu itu #TOC bisa di ganti atau tidak?
    • Igniel
      9/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Support karena cuma CSS dan HTML aja tanpa Javascript.
      Iya #toc bisa diganti namanya.
  • Alan Pebriano
    5/11/18
    Profil: https://www.blogger.com/profile/17311865695079845555
    eh sudah bisa hehe. punya saya pakai sticky header ternyata :3
    • Igniel
      6/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Oke kak semangat terus
  • Alan Pebriano
    5/11/18
    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
    3/11/18
    Profil: https://www.blogger.com/profile/17311865695079845555
    Mantepp! Nanti sy coba deh di blog sy :) thanks mbak igniel
  • Enjay Tarigan
    20/10/18
    Profil: https://www.blogger.com/profile/03806940624036244272
    kalau sticky di mobile.
    dan tidak sticky di pc gimana itu mbak?

    apakah bisa?
    • Igniel
      1/11/18
      Profil: https://www.blogger.com/profile/09199170379661896200
      Bisa. Tapi buat apa TOC dijadikan sticky? Nanti malah mengganggu.
    • ཞıʄզı ąƖʄı
      19/6/21
      Profil: https://www.blogger.com/profile/10582652113899801611
      Mba tombol tampil/sembunyikan kadang gak berfungsi (gak bisa buka tutup TOC). Ini cara atasinya gimana ya
    • Aditya
      28/1/22
      Profil: https://www.blogger.com/profile/04978866360479412763
      Iya, TOC ku juga gabisa disembunyikan 😭
  • Masran Jamsari Redha
    9/9/18
    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
    1/9/18
    Profil: https://www.blogger.com/profile/07899115751434847491
    makasih gan tutorialnya, sangat membantu