Panduan Lengkap Menggunakan Table of Content

Table of Content

Pada template ini terdapat 3 pilihan untuk menampilkan 'Table of Content' yaitu: manual, semi otomatis, otomatis disetiap postingan. Masing-masing cara memiliki keunggulan dan kekurangan tersendiri Anda bisa menggunakan yang manapun yang Anda iginkan sesuai keinginan.

Termasuk memperbaiki bug dimana heading tertutup oleh header ketika table of content di klik

Urutan tag heading

Pertama, pastikan tag heading yang Anda tulis sesuai urutan, maksudnya Anda harus bisa membedakan mana heading dan mana sub heading dalam artikel. Penulisan heading yang tepat adalah sepperti dibawah ini

<h2>Subheading artikel</h2>
  <h3>Sub subheading artikel</h3>
     <h4>Mini subheading artikel</h4>
      <h5>...</h5>
        <h6>...</h6>

Pastikan tag heading yang anda tulis berurutan seperti diatas, karena Toc Otomatis ini bertingkat dan mengambil data tingkatannya dari tag heading yang Anda tulis. Contoh penulisan yang salah:

<h2>Subheading artikel</h2>
<!-- Isi paragraf artikel disini -->

<h4>Mini subheading artikel</h4>
<!-- Isi paragraf artikel disini -->

Hindari juga penggunaan tag <h1> karena tag ini sudah digukakan pada judul artikel. Sangat tidak disarankan menambahkan dua atau lebih tag <h1> dalam satu halaman.

Menambahkan Table of content secara manual

Secara manual artinya anda menuliskan dan menambahkan id='...' pada tag heading satu persatu, memang terlihat merepotkan tapi dengan cara ini anda bisa memilih untuk menambahkan atau melewatkan beberapa tag heading di 'Table of conent', seluruh kontrol ada pada anda. Kode ToC versi manual adalah seperti ini:

<div class='tableOfContent'>
  <input class='tocinput hidden' id='tableOfContent-01' type='checkbox'>
  <label class='tocHeader' for='tableOfContent-01' role='button'>Judul_toc_disini</label>
  <div class='tocContent'>
    <ol>
      <li><a href='#toc-1'>Bagian heading satu</a></li>
      <li><a href='#toc-2'>Bagian heading dua</a>
        <ol>
          <li><a href='#toc-2a'>Bagian subheading satu</a></li>
          <li><a href='#toc-2b'>Bagian subheading dua</a></li>
          <li><a href='#toc-2c'>Bagian subheading tiga</a></li>
        </ol>
      </li>
      <li><a href='#toc-3'>Bagian heading tiga</a></li>
      <li><a href='#toc-4'>Bagian heading empat</a></li>
      <li><a href='#toc-5'>Bagian heading lima</a></li>
    </ol>
  </div>
</div>

Tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h4> pada artikel Anda. Contoh:

<h4>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

// Tambahkan id pada heading menjadi seperti dibawah :

<h4 id='toc-1'>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

// Tambahkan 'checked' pada tag input untuk menyembunyikan daftar isi, lihat contoh dibawah:

<input class='tocInput hidden' id='tableOfContent-01' type='checkbox' checked>

Table of content semi otomatis

Cara kedua ini lebih mudah dan merupakan rekomendasi terbaik dari kami. Perbedaan paling mencolok adalah anda tidak perlu menuliskan id='...' pada heading postingan Anda, scriptnya akan otomatis menambahkannya untuk Anda. Kelebihan lainnya adalah anda juga bisa meletakkan Table of content-nya dibagian manapun yang anda inginkan pada postingan, bisa ditengah, diawal artikel atau di paragraf tertentu.

Ini adalah kode untuk menampikan Table of Content pada postingan Anda, tempatkan kode dibawah ini dibagian manapun yang Anda inginkan dalam postingan

<div class='tableOfContent'>
  <input class='tocInput hidden' id='tableOfContent-01' type='checkbox'>
  <label class='tocHeader' for='tableOfContent-01' role='button'>Table of Content</label>
  <div class='tocContent' id='tocContent'></div>
</div>

Jangan lupa tambahkan juga kode script dibawah pada akhir artikel anda agar table of content-nya aktif

<script>fletroTOC();</script>

Untuk preview langsung nya anda bisa lihat pada postingan ini.

Table of content otomatis

pada cara terakir ini anda tidak perlu menuliskan kode tambahan pada postingan, karena table of content-nya akan otomatis muncul pada bagian sidebar. Pada tampilan mobile table of content akan ditampilkan melayang disamping dengan tombol untuk menampikannya yang ada pada bagian kanan bawah layar.

Untuk menggunakan cara ini silahkan cari kode dibawah ini dan hapus tag comment <!-- ... --> seperti pada contoh

<b:if cond='data:view.isPost'>
  <!--<div class='section sidebar-toc'>
    <b:include name='post-articleToc'/>
    <script>fletroTOC();</script>
  </div>-->
</b:if>

// Ubah menjadi seperti dibawah ini:

<b:if cond='data:view.isPost'>
  <div class='section sidebar-toc'>
    <b:include name='post-articleToc'/>
    <script>fletroTOC();</script>
  </div>
</b:if>

Sembunyikan table of content otomatis di postingan tertentu

Perlu diketahui menggunakan cara otomatis akan menampilkan table of content disetiap postingan tanpa terkecuali, satu-satunya cara untuk menyembunyikannya adalah dengan menambahkan kode CSS pada postingan yang tidak ingin ditampikan Table of content-nya. Berikut kode CSS yang haru anda tambahkan:

<style>.sidebar-toc{display: none}</style>

Cara ini tidak benar-benar menghilangkan Table of content pada artikel tersebut, fungsi dari kode CSS diatas hanya untuk menyembunyikan Table of content-nya.