Mungkin admin blog ini pernah menjelaskan trik membuat menu navigasi blog responif dengan dropdown, namun saya membaca komentar bahwa beberapa pembaca "gagal" menerapkannya. Percayalah, kode kode, material dan elemen yang saya ajukan disini adalah kode kode dasar HTML, CSS dan JavaScript. Jadi jika di terapkan dengan benar ke dalam template blogger sangat kecil kemungkinan gagal. Karena:
Baca juga:
1. CSS- HTML ya HTML
- CSS ya CSS
- Javascript ya Javascript.
 |
| dropdown navbar |
Basis pembuatan template blogger bawaan baik yang layout versi ke 2 maupun yang sudah layout versi ke 3 seperti Contempo, Soho, Emporio dan Notable adalah HTML! Jadi mengapa harus gagal? Coba perhatikan contoh (DEMO) dari menu navigasi yang saya buat di bawah ini, silahkan sentuh atau di klik:
Cara penerapannya juga mudah: Kalian tinggal 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:
 |
| Gambar dasbor edit HTML blogger |
- Pada menu yang muncul pilih "Edit HTML" pada halaman editor HTML yang telah terbuka cari kode </head> dan letakan kode CSS berikut tepat diatasnya:
<style>2. HTML
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #0000FF;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #FF0000;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
z-index: 1;
}
.dropdown-content a {
float: none;
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #d0d0d0;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
Dengan meletakan kode CSS diatas tag penutup </head> kalian telah selesai membuat aba aba yang akan membentuk HTML, sekarang masih di dalam opsi halaman editor HTML blogger, kalian harus meletakan kode HTML berikut di bawah ini tepat di bawah kode tag penutup </head> atau boleh juga di bawah tag <body>:
<div class="topnav" id="myTopnav">Kode HTML telah terpasang! Namun tombol onclik yang biasa kalian sentuh dan klik secara virtual di layar sentuh atau layar laptop membutuhkan Javascript untuk "menghidupkannya.
<a href="#home" class="active">Beranda</a>
<a href="#news">Berita</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">Perihal</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
3. Javascript
Masih di dalam opsi edit HTML cari kode tag </body> dan letakan kode Javascript berikut di bawah ini tepat diatasnya:
<script>Setelah itu SAVE template. Sekarang kalian telah memiliki sebuah template layaknya premium. Navigasi bar terbukti sukses bukan hanya untuk pengunjung manusia, akan atetapi juga sangat atraktif bagi mesin penelusur!
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>