December 01, 2019

CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER

single dropdown menu  for 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.
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
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.

Born in 29 Jan 2002 in Batam. I am a student of Senior High School (SMA) Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++

2 comments:

  1. Hahaha, logika ku berantakan, nampaknya sulit ..
    Sudah korban beberapa template berantakan karena gagal kode html wkwkwk

    #payah

    ReplyDelete
    Replies
    1. Biasanya template korban itu buatan pihak ketiga karena telah di kustomisasi, kalau yang jadi korban itu template default (bawaan) maka tidak masalah. Anggap saja belajar..

      Delete