Cara Membuat Daftar Isi Sederhana Pada Postingan Blogger Dengan HTML dan Javascript

Kalian pasti pernah kesusahan ketika ingin membaca satu bagian saja dalam isi blog. Biasanya karena blog tersebut memiliki tulisan yang banyak dan kita ga punya banyak waktu untuk membaca seluruh isinya

Maka dari itu sebagian blog juga memberikan daftar isi agar pembaca bisa langsung membaca inti tulisan yang dia inginkan.

https://penerbitdeepublish.com/metodologi-penelitian/

Ini juga bisa meningkatkan SEO blog tersebut, karena dianggap bisa ramah pembaca.

Namun ada beberapa kesulitan ketika membuatnya, terkadang kita capek untuk memberikan id pada tag tulisan blog kita. Tentu ini akan membosankan dan ribet, apalagi kalo kalian harus menulis lebih dari satu tulisan setiap harinya

Ada kah cara yang sederhana?

Ada, postingan ini akan menjelaskan tutorial cara membuat Daftar Isi dengan lebih otomatis

Daftar Isi

Konsep

Saya memanfaatkan sesuatu yang disebut dengan Javascript DOM, dimana saya menyeleksi Heading yang memiliki tag <h2>, lalu tag tag heading ini saya looping ke dalam HTML. Ini memungkinkan meskipun kita mengubah isi Heading, daftar isi juga akan berubah secara otomatis.

Langkah Langkah

1. Buat Heading

Pastikan ketika kalian menulis blog, kalian memberikan heading pada tulisan. Contohnya pada postingan ini kalian bisa melihat saya memberikan Heading pada Langkah Langkah. Tentu kalian akan memiliki lebih dari satu Heading.

Heading ini memiliki tag <h2> yang oleh script javascript sudah terseleksi. Maka dari itu pastikan kalian membuat Heading sesuai kebutuhan kalian

Kalian bisa membuat heading dengan memblok tulisan dan menekan Heading pada Tab diatas

Setidaknya kalian akan membuat postingan dengan struktur mirip seperti berikut

2. Pastekan code <div class="content"></div>

Masukkan kode diatas pada posisi yang kalian inginkan pada postingan kalian. Caranya dengan mengubah mode tulisan ke dalam HTML View, lalu pastekan di tempat yang kalian inginkan.

Saya akan meletakkan kode ini dibawah tulisan Daftar Isi

3. Pastekan kode javascript pada HTML pada postingan blog

Kalian buka postingan dalam HTML View, lalu pastekan kode berikut

const content = document.querySelector('.content')
const ul = document.createElement('ul')
const allHeadings = document.querySelectorAll('h2')

allHeadings.forEach(item => {
    const li = document.createElement('li')
    const a = document.createElement('a')

    item.setAttribute('id', item.innerHTML)
    a.setAttribute('href', `#${item.innerHTML}`)
    a.innerHTML = item.innerHTML

    li.append(a)
    ul.append(li)
})

content.append(ul)

</script>

Letakann di paling bawah. Sehingga hasilnya akan terlihat seperti berikut

Supaya tampilannya lebih dinamis, kita juga bisa memberikan fitur dimana ketika kita mengklik daftar isi tersebut ia akan langsung menggeser dengan halus

Caranya kalian pilih Theme, lalu klik tanda segitiga dan pilih Edit HTML

Kalian akan melihat sourcecode blog kalian. Cari body { Lalu kalian tambahkan kode berikut

html {
scroll-behavior: smooth;
}

dibawah tagnya

Contoh seperti ini

Contoh pada tulisan saya yang berjudul Review Kali Linux Versi 22.4, OS Sakti Untuk Hacking + Cara Install Ketika kita lihat hasilnya maka secara otomatis script tersebut akan membuatkan daftar isi sesuai dengan heading heading yang kita buat sekaligus scrolling otomatis yang smooth

Kesimpulan

Untuk membuat daftar isi pada tulisan blog, kita memanfaatkan kode javascript dan html sederhana. Membubuhkannya pada postingan, dan secara otomatis ia script tersebut akan menyeleksi apa aja heading yang kita buat

Sourcecode: Github