9 Cara Cepat Membuat Menu Bar Responsif Pada Web Atau Blog

Membuat tampilan web atau blog secara responsif sangat dibutuhkan saat ini, karena banyak pengguna gadget yang mereka membaca artikel secara mobile. Untuk itulah diperlukan suatu tampilan yang dapat menyesuaikan
dengan ukuran monitor atau layar secara fleksibel. dibawah ini adalah cara yang dapat kalian lakukan pada blog yang kalian miliki dan sangat mudah sekali dalam penerapanya. Ikuti langkah-langkahnya

1. Masuk dengan akun google yang kalian miliki
2. Masuk ke blogger dan pilih salah satu blog yang akan di edit
3. Pilih Theme atau tema
4. Edit HTML
5. Mulai cari bagian ]]></b:skin> dan Ketik kode dibawah ini atau copy dan paste dibagian bawah kode css dari blog.Paste Kode dibawah ini diatas ]]></b:skin> 

.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
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: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
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;
}
} 

6. langkah berikutya copy kode berikut ini dibawah kode </header> dan kalian sesuaikan link yang telah kalian miliki. tanda # adalah link yang harus kalian isi sesuai dengan kebutuhan.
 dan dibagian bawahnya adalah untuk submenu jika itu dibutuhkan maka isilah jika tidak dibutuhkan tinggal hapus.

<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<font size='1'>&#9660;</font>
</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">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Copas kode JavaSript Navigasi Menu Responsive Dropdown ini di atas kode </body>


<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

7. Simpan atau sebelum menyimpan lebih baik blognya preview terlebih dahulu atau pratinjau.
8. untuk mengetahui dapat dibuka diberbagai gadget kalian klik Ctrl+Shift+i besamaan
Tampilannya seperti gambar dibawah ini.

9. Setelah di simpan buka kembali tema atau theme dan klik setelah seluler kemudian pilih ya dan tema seluler custom atau khusus.
Perhatikan gambar dibawah ini.

Selamat mencoba, Terimakasih telah mengunjungi codingcil.