Cara Membuat Menu Responsif di Atas Header Blog

Hai sob! jumpa lagi dengan penulis PuloBlog. Pada kesempatan kali ini admin akan posting tutorial blogger mengenai cara membuat / memasang menu navigasi responsif di atas header blogspot. Seperti yang kita ketahui bahwa menu navigasi dalam sebuah blog adalah hal yang sangat penting. Mengapa? dikarenakan menu navigasi tersebut akan memudahkan pengunjung atau pembaca blog dalam menemukan informasi/artikel yang ingin mereka baca.

Mengenai menu navigasi yang bertempat di atas header ini saya yakin pasti kalian sudah mengerti apa fungsinya. Ya, menu navigasi di atas header ini biasa dimanfaatkan untuk menempatkan deretan link-link yang berkaitan dengan blog kita, seperti halaman Contact, About, Sitemap (Daftar Isi), Disclaimer, Privacy Policy, Advertise dan lain sebagainya. Nah di artikel kali ini admin akan membagikan tutorial bagaimana cara membuat suatu menu navigasi di atas header secara responsive, yang mana tampilannya mampu menyesuaikan pada perangkat desktop maupun mobile.

Berikut tampilan dari Menu Responsif:

Tampilan pada versi Desktop

Tampilan pada versi Mobile

Bagaimana langkah-langkahnya? silahkan ikuti tutorial di bawah ini:

1. Pertama, buka www.blogger.com lalu login ke akun Blogger sobat.

2. Kemudian pilih menu Theme > Edit HTML.

3. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini tepat di atasnya.

ul.menutop{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333;border-bottom:4px solid #3498DB}ul.menutop li{float:left;}ul.menutop li a{display:inline-block;color:#f2f2f2;text-align:center;padding:12px 16px;text-decoration:none;transition:.3s;font-size:14px}ul.menutop li a:hover{background-color:#555}ul.menutop li.icon{display:none}@media screen and (max-width:680px){ul.menutop li:not(:first-child){display:none}ul.menutop li.icon{float:right;display:inline-block}ul.menutop.responsive{position:relative}ul.menutop.responsive li.icon{position:absolute;right:0;top:0}ul.menutop.responsive li{float:none;display:inline}ul.menutop.responsive li a{display:block;text-align:left}}

4. Cari kode </body> lalu letakkan kode di bawah ini tepat di atasnya.

<script>
function myFunction() {
    var x = document.getElementById(&quot;topmenu&quot;);
    if (x.className === &quot;menutop&quot;) {
        x.className += &quot; responsive&quot;;
    } else {
        x.className = &quot;menutop&quot;;
    }
}
</script>

5. Cari kode <div id='header' ... (dan seterusnya) lalu letakkan kode di bawah ini tepat di atasnya.

<ul class='menutop' id='topmenu'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='/p/about.html'>About</a></li>
  <li><a href='/p/contact.html'>Contact</a></li>
  <li><a href='/p/sitemap.html'>Sitemap</a></li>
  <li><a href='/p/disclaimer.html'>Disclaimer</a></li>
  <li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
  <li class='icon'>
    <a href='javascript:void(0);' onclick='myFunction()'>&#9776;</a>
  </li>
</ul>

Ket:        : Ganti dengan URL laman blog Anda (sesuaikan dengan judul lamannya).

6. Terakhir tekan tombol Save theme untuk menyimpannya.

7. Lihat hasilnya pada blog Anda :)

Gimana? cukup mudah bukan! Silahkan dipraktekkan sendiri pada blog masing-masing. Sekian dulu artikel tentang Cara Membuat Menu Responsif di Atas Header Blog, semoga bermanfaat.