Skip to main content

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

Baca Juga:  Option Group adalah Alternatif Penggunaan Dependant Dropdown List 


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

<script>

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

Comments

Popular posts from this blog

Cara Mengatasi Missing Value Pada Dataset

  Ketika kita ingin mengolah data untuk menjadi sebua model machine learning, maka data yang harus disajikan harus bersih dari field field kosong. Biasanya kita akan menjumpai filed field bernilai NaN yang artinya field tersebut kosong atau tak diketahui. Ini sangat berpengaruh hasil model data kita Inilah yang disebut Missing Value. Nilai yang hilang dari beberapa baris dataset Cara Mengetahui Bahwa Dataset Kita Terdapat Missing Value? Cara termudah adalah dengan menggunakan method method yang tersedia oleh package Pandas Dengan Pandas, tak hanya kita bisa mengetahui dataset terdapat Missing Value atau tidak, kita bisa mencari mean, median dan modus, mengisikan data data yang kosong tersebut, dan melihat hasil data tersebut dari beberapa range tertentu Pandas juga bisa membantu kita untuk memeriksa apakah dataset kita memiliki data yang kosong. Tak mungkinkan kita melihat satu persatu ratusan atau ribuan data. Maka dari itu kita membutuhkan method yang dikerjakan oleh python dalam pa

Cara Mengatasi Hang/Freeze Pada Laptop Asus TUF Gaming

  Ada beberapa kendala ketika membeli laptop. Seperti ada aplikasi yang tidak kompaktibel, ada yang hardwarenya crashed, dan bahkan memang harus dibawa ke manufakturnya untuk diktukar karena ada barang yang kita beli adalah miss saat quality control Terlepas dari semua kendala tersebut. Saya akan memberikan sekedar solusi yang bisa menjadi manfaat jika permasalahan itu sama dengan kalian. Yaitu, laptop yang suka freeze, hang, saat kita operasikan Sedikit Cerita Saya belum ada setahun menggunakan laptop Asus varian Tuf Gaming ini. Namun saat beberapa minggu pertama saya mencobanya, ada beberapa kendala yaitu laptop sering hang dan freeze tanpa sebab. Ini terjadi secara tiba tiba. Dan seumpamam saya bawa lagi ke outlet laptop ini berasal, saya gak bisa memberikan alasan yang jelas kenapa laptop ini bisa freeze dan hang. Karena memang terjadi tiba tiba saja.  Hingga beberapa bulan selanjutnya, laptop ini semakin sering hang. Baru beberapa menit dipakai freeze, saya force shut down lewat t

Kupas Tuntas Seputar Agile Dan Contoh Penerapannya

  Startup, perusahaan digital, atau bahkan programmer yang sedang melayani clientnnya untuk mengerjakan sebuah aplikasi memiliki metode.  Metode ini menjadi panduan baku yang kerap digunakan dimananpun dalam pengemabangan produk digital Lebih mudahnya saat kita membangun aplikasi mobile. Kita akan mempelajari bahasa pemograman apa saja yang dibutuhkan, juga serba serbi framework dan tool yang memudahkan segala prosesnya Metode yang baru saja saya ceritakan diatas dinamakan Agile . Sedangkan project yang menerapkan konsep tersebut dinamakan, Agile Project Apa Itu Agile dan Agile Project? Menurut Wikipedia .  Sekumpulan praktek yang bertujuan untuk menaikkan keefeketifan pengembangan suatu aplikasi secara profesional, tim dan terorganisir. Agile melibatkan pengembangan solusi melalui usaha secara kolaboratif dari sifat yang sudah terorganisir, fungsionalitas dan pelanggan Metode ini sangat mengandalkan kolaborasi. Mulai dari para engineer hingga product manager, semuanya harus melalui s