Langsung ke konten utama

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.

Komentar

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

    #payah

    BalasHapus
    Balasan
    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..

      Hapus

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa