Cara menggunakan button dropdown html

single dropdown menu  for blogger (gambar oleh Adelina Sofyan)

Membuat menu navigasi atau kustom navbar pada blogger memang berguna sebagai tool navigasi bagi pengunjung dan juga berguna bagi mengoptimalkan kinerja mesin pencari. Ada trik yang dapat kita terapkan jika ingin membuat segalanya tampak minimal, yakni tombol menu dropdown.

Asal kalian tahu, dropdown bisa saja berbentuk seperti sebuah menu yang apabila disentuh atau di klik akan menampilkan menu menu yang tersembunyi di baliknya berupa list yang turun kebawah. Cobalah sentuh atau klik tombol merah yang saya buat di bawah ini:

Dropdown menu Dengan klik

Klik tombol merah di bawah untuk menampilkan menu menu.

Menerapkannya sama dengan tips tips saya sebelumnya. Material dan elemen elemennya di buat menggunakan HTML, CSS dan Javascript. Karena template blogger dibuat berbasis HTML (HTML Template), jadi sangat mudah menerapkannya.

Kalian harus mengikuti step step cara pemasangannya dan harus membiasakan diri dengan kode kode HTML dan atribut atributnya, semuanya akan berjalan seiring waktu akan menjadi lebih mudah jika kalian mau melatihnya sekalipun dengan cara otodidak.

Saya belajar koding 100% otodidak, namun saya mau mempelajarinya di sela sela kesibukan belajar di bangku sekolah formal. Kemudahan belajar koding itu adalah kalian tidak perlu menghafal apa apa, koding dan programming itu adalah logika, kalian hanya perlu belajar terus menerus.

Baiklah kita mulai memasang kode kode HTML pembuatan menu dropdown di atas:

1. CSS

Pada template blogger posisi penempatan CSS selalu berada diatas HTML. Masuk ke pengaturan blogger.

• Pilih theme
• Lalu akan muncul menu baru blogger cari titik tiga፧ dan klik maka akan muncul menu seperti terlihat pada gambar berikut:

edit HTML blogger

• Pada daftar menu yang muncul turun kebawah pilih "Edit HTML" pada halaman editor HTML yang telah terbuka cari kode dan letakan kode CSS berikut tepat diatasnya:

 2. HTML
Selanjutnya masih di dalam opsi halaman editor HTML blogger letakan kode HTML berikut di bawah ini tepat di bawah kode :

Dropdown

Beranda Halaman
Trik Navbar blogger
Trik Toggle dark mode

 3. Javascript
Masih di dalam opsi halaman editor HTML cari kode dan letakan kode javascript berikut dibawah tepat diatasnya:

Kalian dapat mengenali kode Javascript dengan mudah yakni sebundel statemen kode yang di buka dengan  
Selanjutnya SAVE tema. Selesai.