Panduan Menggunakan Table of Content Otomatis serta Cara Menyembunyikannya
|
| Source: jagodesain.com |
Jika pada table of contents versi awal(manual) Anda bisa memilih untuk untuk meletakannya dimanapun, tapi pada versi otomatis ini script dipasang permanen yang artinya untuk mengubahnya Anda harus mengedit kode HTML templatenya. Cara paling mudah yang bisa Anda lakukan untuk menyembunyikannya adalah dengan menambahkan display: none; pada className ToC-nya diakhir setiap postingan. Baca artikel ini sampai habis agar lebih mudah difahami.
Sebelum itu ada aturan yang dalam menulis artikel yang harus diketahui agar Toc-nya berfungsi sama seperti pada demo.
Urutan tag heading yang benar
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.
Cara menyembunyikan table of contents
Mungkin ada sebagian yang kurang menyukai konsep Toc ini, karena itu kami memberikan beberapa pilihan opsi untuk menyembunyikan fitur ini.
Menyembunyikan ToC pada halaman statis
ToC otomatis ini disetting agar hanya tampil pada halaman singleItem(halaman post dan statis), Jika Anda ingin menampilkannya hanya pada halaman posting maka silahkan cari dan ubah kode dibawah ini:
1. Cari dan ubah atribut cond='' pada tag dibawah ini:
<!-- Table of Contents -->
<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-articleToc'/>
// Ubah menjadi
<b:include cond='data:view.isPost and !data:view.isPreview' data='post' name='post-articleToc'/>
2. Temukan dan ubah kode dibawah ini
<script>medianTOC();</script>
// Ubah menjadi
<b:if cond='data:view.isPost'><script>medianTOC();</script></b:if>Menyembunyikan Toc hanya di postingan tertentu
Karena bersifat permanen, pada opsi ini Anda tidak benar-benar menonaktifkan ToC, script nya masih tetap ada pada postingan tersebut. Yang dilakukan hanya menambahkan display: none pada selector ToC-nya sehingga tampilannya akan disembunyikan.
// Tambahkan kode ini pada akhir postingan yang ingin Anda sembunyikan ToC-nya.
<style>.Blog .post-toc{display: none}</style>
Menyembunyikan ToC ketika halaman di load dan menampilkannya ketika tombol ToC diklik
Note: Di pembaruan terbaru fungsi ini sudah dijadikan sebagai fungsi bawaan jadi anda tidak perlu melakukan apapun
Pilihan ini adalah kebalikan dari fungsi ToC yang ada saat ini, Defaultnya ToC akan langsung tampil ketika laman diload dan menutupi sidebar, user harus klik judul ToCnya terlebih dahulu agar Widget di sidebar bisa muncul.
Untuk membalik fungsinya Anda harus mengubah beberapa kode dibawah ini :
1. Cari dan tukar isi CSS pada kode dibawah ini:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:0;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:1000vh}
Ubah menjadi seperti dibawah ini:
.Blog .post-tocContent{-webkit-transition:all .3s ease;transition:all .3s ease;max-height:1000vh;overflow:hidden}
.Blog .toc-menu:checked + .post-toc .post-tocContent{max-height:0}
info: Kode diatas letaknya terpisah, fungsinya untuk mengubah setelan ToC pada tampilan mobile
2. Tambahkan atribut checked='checked' pada tag <input> dibawah ini:
<input class='toc-menu hidden' id='offtoc-menu' type='checkbox'/>
// Menjadi
<input class='toc-menu hidden' id='offtoc-menu' type='checkbox' checked='checked'/>Contoh penerapannya bisa Anda lihat pada postingan ini.
Nonaktifkan permanen table of contents
Untuk menonaktifkannya secara permanen cari dan hapus kedua kode dibawah ini:
<b:include cond='data:view.isSingleItem and !data:view.isPreview' data='post' name='post-articleToc'/>
<script>medianTOC();</script>
Posting Komentar