CARA MEMASANG NAVBAR MOBILE FRIENDLY PADA BLOG

Pentingnya membuat navigasi (navbar) pada blog memang telah diakui oleh para blogger. Dan juga dianjurkan oleh para pakar website.

mobile navbar

Buktinya hampir setiap template blog premium berbeli selalu di pasang navigasi dengan beraneka warna menu. Menu memang bermanfaat menavigasi pengunjung dalam mengeksplorasi halaman blog kita. Di samping itu navbar menu blog masih dapat mengoptimalkan mesin pencari dalam mempetakan konten konten blog kita.

Untuk manusia, hal yang menarik adalah navigasi menu yang berbeda, penuh warna, ada hiasan ikon okon keren, fresh, simpel dan efektif.

Untuk mesin pencari tentu saja memiliki kriteria tersendiri. Kali ini saya akan mengajak kalian untuk membuat menu navigasi mobile yang cocok sekali untuk di buka melalui ponsel dan tablet. Menu seperti ini selain sederhana juga sangat menghemat ruang. Perhatikan contohnya dibawah ini:

Anissa Page

News Contact About

Navbar vertikal

contoh ini untuk mendemokan bagaimana navigasi menu blog terlihat pada saat di buka melalui halaman mobile (ponsel/hape).
Klik tombol menu hamburger (garis tiga lapis) di sudut kanan atas halaman, untuk membuka menu menu.

Kalian dapat mengklik hamburger menu atau garis susun tiga  ☰  untuk menampilkan menu yang akan turun secara vertikal. KLIK kembali untuk mengembalikan posisi navbar.

Cara memasangnya:

1. CSS
CSS adalah bagian penting dari HTML, ia yang mendeskripsikan bagaimana nanti HTML di visualkan di halaman web.

Masuk ke pengaturan atau dasbor blog

• Pilih theme
• Lalu akan muncul menu baru blogger cari titik tiga sweetie berikut: ፧dan klik maka akan muncul menu seperti terlihat pada gambar berikut:

Opsi edit menu 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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>

<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: #555;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: #333;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: transparent;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: transparent;
color: white;
}
</style>

 2. HTML
Letakan kode berikut tepat di bawah </head>:

<div class="mobile-container">
<!-- Top Navigation Menu -->
<div class="topnav">
<a class="active" href="https://www.blogger.com/u/1/blogger.g?blogID=3894474860842702694#home">Anissa Page</a>
<div id="myLinks">
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
<a class="icon" href="javascript:void(0);" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left: 16px;">
<h3>

3. JavaScript

Cari kode </body> dan letakan kode berikut tepat diatasnya:

<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>

SAVE template.

Dapat di terapkan pada hampir semua template bawaan (default) blogger.