CARA MEMBUAT MENU NAVIGASI MOBILE FRIENDLY DENGAN MUDAH

Navigasi menu itu penting terutama bagi blog blog dengan niche khusus. Membuat tampilan muka sebuah blog menjadi menarik dan mudah di fahami oleh pengunjung. Menurut hemat kami Menu Navigasi yang baik itu harus responsive dan mobile friendly. Artinya dapat berfungsi dan atau di fungsikan dengan baik pada tampilan desktop dan hape. Terutama pada zaman sekarang yang serba mobile tampilan blogger pada ponsel cerdas menjadi amat penting!

Lihat Menu Navigasi hasil buatan kami:

Atau lihat DEMO

 Cara pembuatannya adalah:
(Sangat cocok diterapkan ke template awsome, sederhana dan Perjalanan yang sudah di modifikasi menjadi responsive dan mobile friendly.)

1. Masuk ke pengaturan blogger
2. Pilih Theme/Tema
3. Pilih EditHTML

Langkah pertama: Tambahkan HTML

Pastikan template anda telah terpasang kode: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Jika sudah ada langsung saja cari kode </header> dengan jalan pintas menekan ctr+f pada keyboard dan enter. Jika sudah ketemu letakan kode berikut diatas kode </header> tersebut:

<!-- Top Navigation Menu -->

<div class='topnav'>

  <a class='active' href='/'>KotakPandoraSAtu</a>

  <!-- Navigation links (hidden by default) -->

  <div id='myLinks'>

    <a href='#news'><i aria-hidden='true' class='fa fa-file-text-o'/>News</a>

    <a href='#contact'><i aria-hidden='true' class='fa fa-phone'/>Contact</a>

    <a href='#about'><i aria-hidden='true' class='fa fa-globe'/>About</a>

  </div>

  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>

    <i class='fa fa-bars'/>

  </a>

</div>

Langkah kedua Tambahkan CSS.

Caranya cari kode ]]></b:skin> dan letakan kode berikut diatasnya:

/* Style the navigation menu */
.topnav {
overflow: hidden;
background-color: #6495ED;
position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
display: none;
}

/* Style navigation menu links */
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Style the active link (or home/logo) */
.active {
background-color:#6495ED;
color: white;
}

Langkah ketiga Tambahkan JavaScript

Caranya cari kode </body> lalu letakan kode berikut diatasnya:

<script>/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
function myFunction() {
var x = document.getElementById(&quot;myLinks&quot;);
if (x.style.display === &quot;block&quot;) {
x.style.display = &quot;none&quot;;
} else {
x.style.display = &quot;block&quot;;
}
}</script>

Langkah berikutnya SAVE template.

untuk melihat contoh lihat video tangkapan layar yang saya buat:

Catatan:

• Ingat memasukan kode Js kedalam tag </body> harus selalu di awali dengan <script> dan kemudian di tutup dengan </script>
• Kode warna  CSS yang kami tandai dengan sorotan warna pink muda dapat anda robah sehingga merobah warna tampilan navigasi bar.