CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER

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.

Baca juga:

APA BEDANYA jQUERY DENGAN JavaScript?

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.

Beranda Halaman Trik Navbar blogger Trik Toggle dark mode

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 </head> dan letakan kode CSS berikut tepat diatasnya:

<style>
.dropbtn {
background-color: #FF0000;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #00FFFF;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>

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

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="https://www.editblogtema.net/">Beranda Halaman </a>
<a href="https://www.editblogtema.net/2019/11/cara-membuat-navigasi-menu-blogger-yang.html">Trik Navbar blogger</a>
<a href="https://www.editblogtema.net/2019/11/cara-memasang-tombol-toggle-dark-mode.html">Trik Toggle dark mode</a>
</div>
</div>

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

<script>
/* Saat pengguna mengklik tombol merah akan meuncul menu dropdown */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Untuk menutup atau meneymbunyikan menu dropdpwn klik kembali tombol //window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Kalian dapat mengenali kode Javascript dengan mudah yakni sebundel statemen kode yang di buka dengan <script> dan kemudian ditutup dengan: </script> 
Selanjutnya SAVE tema. Selesai.