Hai Sahabat Cangkir. Kali ini kita akan belajar bagaimana membuat daftar isi yang bisa disembunyikan atau dilipat (Collapsible Table of Content). Bagi kalian yang belum mengenal seperti apa daftar isi yang bisa disembunyikan ini, lihat Daftar Isi artikel blog di bawah ini untuk mengetahui penampakannya dan bagaimana cara kerjanya.
Membuat daftar isi artikel pada halaman web atau blog dapat memberikan tampilan yang lebih bersih dan terorganisir. Jika Anda memiliki artikel panjang dengan berbagai bagian atau bab, Daftar Isi yang dapat disembunyikan membantu pengunjung untuk mencari informasi yang dibutuhkan dengan mudah tanpa harus melihat atau membaca keseluruhan artikel sekaligus. Fitur ini sangat membantu pengguna karena mereka dapat memilih bagian yang ingin segera dibaca.
Dalam tutorial ini, kita akan membahas langkah-langkah mudah untuk membuat Daftar Isi yang memiliki beberapa fitur, antara lain:
- Judul bab/bagian yang bisa diklik.
- Daftar Isi yang bisa ditampilkan atau disembunyikan jika diklik.
- Tampilan nama, daftar isi, dan tautan yang bisa dikustomisasi sesuai selera.
- Kode JavaScript yang ringan dan tidak membebani kecepatan muat halaman.
Memasang Kode CSS
Langkah:- Klik "Copy" untuk menyalin kode CSS di bawah ini:
.toc-pro { display: flex; width: 100%; clear: both; margin: 0; } .toc-inner { position: relative; max-width: 100%; font-size: 14px; background-color: rgba(165, 165, 165, .1); overflow: hidden; line-height: 23px; border: 1px solid #a0a0a0; border-radius: 5px; } a.toc-title { position: relative; display: flex; align-items: center; justify-content: space-between; height: 38px; font-size: 14px; font-weight: 700; color: #333333; padding: 0 15px; margin: 0; } .toc-title-text { display: flex; } .toc-title-text:before { content: '\F475'; font-family: var(--icons-font); font-size: 20px; margin: 0 5px 0 0; } .rtl .toc-title-text:before { margin: 0 0 0 5px; } .toc-title:after { content: '\F282'; font-family: var(--icons-font); font-size: 16px; margin: 0 0 0 25px; color: #333333; } .rtl .toc-title:after { margin: 0 25px 0 0; } .toc-title.opened:after { content: '\F286'; } a.toc-title:hover { text-decoration: none; } #toc { display: none; padding: 0 15px 10px; margin: 0; } #toc ol { padding: 0 0 0 15px; } #toc li { font-size: 14px; font-weight: 500; margin: 10px 0; } #toc li a { color: #333333; } #toc li a:hover { opacity: .8; text-decoration: underline; } - Letakkan kode di atas di dalam template blog Anda, tepat setelah
atau sebelum<head>
Untuk menjaga kerapihan, letakkan bersama CSS khusus postingan blog (biasanya diawali dengan ".item-post .post-body{...}").</head>. - Lakukan kustomisasi sesuai selera atau tema blog Anda, misal mengubah jenis font (font-family), ukuran font (font-size), atau warna (color).
- Untuk ikon, Anda bisa mengganti jenis font (warna kuning) sesuai dengan yang Anda gunakan pada blog, misalnya FontAwesome, Material Icons. Jika Anda tidak menggunakan font kustom, gantilah properti untuk "content" dengan kode Unicode yang Anda kehendaki, atau jika Anda ragu, hapuslah semua kode untuk ikon.
- Klik simpan, dan lanjutkan ke langkah berikutnya.
Memasang Kode HTML
Langkah:- Klik "Copy" untuk menyalin kode HTML di bawah ini:
<div class="toc-pro"> <div class="toc-inner"> <a href="javascript:void(0)" class="toc-title"> <span class="toc-title-text">Daftar Isi</span> </a> <div id="toc"> <ol> <li><a href="#section1">Bab 1</a></li> <li><a href="#section2">Bab 2</a> <ol> <li><a href="#subsection1">Bagian 2.1</a></li> <li><a href="#subsection2">Bagian 2.2</a></li> </ol> </li> <li><a href="#section3">Kesimpulan</a></li> </ol> </div> </div> </div> - Letakkan kode HTML di atas ke dalam artikel blog. Pastikan anda berada pada mode "HTML view", bukan "Compose view". Tab HTML view dan Compose view dapat ditemukan di bagian atas halaman editor Blogger.
- Lakukan kustomisasi nama (warna kuning) sesuai selera dan isi artikel blog Anda, misal mengubah nama "Table of Content" menjadi "Daftar Isi", "Bab 1" menjadi "Definisi ...", dll.
- Anda dapat mengurangi atau menambah jumlah bab sesuai kebutuhan. Untuk menambah Bab baru, tambahkan deret kode
Begitu pula jika menambahkan bab lagi, tambahkan deret kode yang sama lalu ubah "#section4" menjadi "#section5", dst.<li><a href="#section4">Bab tambahan</a></li>.
Kustomisasi Kode HTML
Langkah berikutnya adalah menghubungkan setiap tautan dalam daftar isi ke bagian yang dituju. Dengan demikian, ketika pembaca mengklik tautan dalam daftar isi, mereka akan langsung diarahkan ke bagian yang diinginkan.
Tambahkan atribut id pada judul bab, misalnya id="section1", id="section2", dan seterusnya.
<h2>Memasang Kode CSS</h2>.<h2 id="section1">Memasang Kode CSS</h2>.Setelah selesai menambahkan atribut ID pada setiap judul bab, periksa hasilnya menggunakan mode Preview (Pratinjau) untuk memastikan semua tautan telah berfungsi dengan benar dan mengarah ke bagian yang sesuai.
Memasang Kode JavaScript
Agar daftar isi bisa disembunyikan, kita membutuhkan kode JavaScript untuk membuka atau menyembunyikannya. Gunakan kode JavaScript berikut ini:
<script>
document.querySelector('.toc-title').addEventListener('click', function() {
const toc = document.getElementById('toc');
const title = this;
if (toc.style.display === 'none' || !toc.style.display) {
toc.style.display = 'block';
title.classList.add('opened');
} else {
toc.style.display = 'none';
title.classList.remove('opened');
}
});
</script>Salin dan letakkan kode JavaScript di atas pada bagian akhir atau paling bawah pada postingan. Jika Anda menghendaki setiap artikel memiliki daftar isi, Anda bisa meletakkannya di dalam template blog agar tidak perlu lagi menyalinnya di setiap postingan.
Jika Anda mengikuti semua langkah dengan benar, daftar isi artikel blog akan terpajang dengan manis. Sekali lagi, coba lakukan pratinjau (preview) dan cek apakah semua tautan pada daftar isi menunjuk ke bagian yang benar.
Selamat mencoba. 🤗😊