November 30, 2019

CARA MEMBUAT NAVIGASI MENU BLOGGER YANG RESPONSIF DENGAN MENU DROPDOWN

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:
  • HTML ya HTML
  • CSS ya CSS
  • Javascript ya Javascript.
dropdown navbar
dropdown navbar
Baca juga:

  1. MEMBUAT NAVIGASI MENU DI DALAM GAMBAR PADA BLOG
  2. CARA MEMBUAT TOMBOL DROPDOWN MENU TUNGGAL DI BLOGGER
 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:
1. CSS
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:
dasbor edit HTML blogger
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:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
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>
2. HTML
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">
<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()">&#9776;</a>
</div>
 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.

3. Javascript
Masih di dalam opsi edit HTML cari kode tag </body> dan letakan kode Javascript berikut di bawah ini tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</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! 

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++