Cara Membuat Menu Navigasi Responsive di Blogspot

Update Terbaru, 22 Desember 2018

Membuat Menu Navigasi Responsive di Blog – Menu navigasi adalah menu yang ditampilkan pada halaman blog atau website yang bertujuan untuk memudahkan pengunjung dapat mengakses seluruh isi konten blog. Menu navigasi biasanya memuat label-label atau laman pada blog yang terdapat diatas header atau dibawah header blog.

Kali ini saya akan memberikan tutorial untuk membuat menu navigasi responsive, Nah, kenapa harus responsive? karena tuntutan digital sekarang ini banyak sekali pengguna internet yang menggunakan smartphone. Jika anda memasang menu responsive maka akan tetap terlihat oleh pengguna smartphone layaknya membuka dengan desktop atau komputer.

Baca: Cara Mengetahui Responsive Blog atau Website

Screenshot:

Tutorial Membuat Menu Navigasi Responsive di Blog

Pertama:
Silahkan login akun blogger anda, kemudian pilih “Template” Lalu klik “Edit HTML”.

Kedua:
Lalu cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi.

/* Menu Navigasi */
.menunav{max-width:auto;background:#1a7db7; color:#fff;display:inline-block;width:100%;border-bottom: 3px solid #dfdfdf;}
.menunav ul{width:100%;padding:0;margin:0 auto}
.menunav li:first-child a{padding:7px 10px 3px}
.menunav li{list-style:none;display:inline-block;float:left}
.menunav li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}
.menunav li a:hover{background:#2374a3; color:#fff}
.menunav li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.menunav li li a,.menunav li li a:link,.menunav li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.menunav li li a:hover,.menunav li li a:active{background:#2374a3}
.menunav li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.menunav li ul a{width:140px}
.menunav li ul ul{margin:-33px 0 0 157px}
.menunav li:hover>ul,.menunav li.sfHover ul{left:auto}
.menusearch{width: 210px;;float:right;margin:0 auto;padding: 13px 0 0;}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0} none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

Ketiga:
Lalu pasang kode menu navigasi berikut tepat dibawah </header>

<div class='menunav'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='http://1.bp.blogspot.com/-wqzYVSTa638/UQrc7C0UP3I/AAAAAAAABgU/TgbAOmzXLAs/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Sub Menu 1</a>
<ul>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here....'/>
<input class='searchbutton' src='data:image/gif;base64,R0lGODlhGAAYAPdlAKysrPr6+vn5+WJiYvj4+GNjY01NTW1tbXFxcV9fX1RUVFNTU729vf7+/lFRUff394ODg0NDQ2RkZF5eXmxsbLKysr6+vnNzc9PT03BwcN3d3bu7u8PDw1BQULm5udHR0WZmZl1dXefn50VFRevr6/v7+3JycvT09M7OzpKSktfX12VlZfDw8MrKytjY2MzMzP39/eLi4q2trUtLS0pKSpWVlW5ubn19fdbW1r+/v29vb6qqqri4uFdXV1VVVYKCgpSUlN7e3mdnZ35+fkRERNTU1GBgYFhYWJycnLS0tMjIyIWFhfPz8zw8POrq6tzc3HZ2dtLS0vz8/FxcXKurq09PT7a2ttra2sfHx1JSUnV1debm5q6urlZWVoCAgOnp6YGBgU5OTmtra7q6uv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAGUALAAAAAAYABgAAAjVAMsIHEiwoMGDCBMqXMiwYcMTT1RY0HDC4UAsKS5MkKAlxYcADitQGCDmAIUDBYRYafgBxIoMXHCokHFBwoAoCwVAmJBhC0EXUBKAYaIwyJQCHAxyGKADhUILR1aQMHgFQQEeChl0GcDCoAYTRjwoLJIlBAaDKBKAUKLwAQIDQwgQJPHDAISuWR10WPLii5MWXhxUASKAYY0OEUKYQJCAyILHAB4wpGJDQZMIPQ5USOJjBgC5CgOIGAMAiQcRAhkoGAHAosENCm64NoghxuzbuHPrLhgQADs=' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
</div>

Selanjutnya pasang kode responsive pada media queries berikut ini tepat diatas kode ]]></b:skin> atau </style>:

@media only screen and (max-width:768px){
.menunav li{float:none;}
.menunav li a{background:none}.menunav ul{text-align:center;width:100%}.menusearch{float:none;padding:5px 0 10px}
}

Terakhir, Klik Save/Simpan dan lihat hasilnya.

Demikian share informasi Cara Membuat Menu Navigasi Responsive di Blogspot agar blog anda lebih responsive dan pengunjung dapat melihat menu navigasi dari semua perangkat.

Selamat Mencoba.

15 Comments

Candra Balas

ngeletakin media queries nya dimana gan ?
maaf newbie
- Mas Zain Balas
  
  Lettakkan kode queries sebelum kode . Selamat mencoba
  - Arnanda F M Balas
    
    Kode queriesnya diletakkan sebelum kode apa gan?
    - Mas Zain Balas
      
      Silahkan pasang diatas kode ]]></b:skin> atau </style>
egic Balas

Maaf gan saya izin cupas kodeya …gan
- Mas Zain Balas
  
  Silahkan Mas, semoga dapat bermanfaat. Salam Blogger.
ijhal Balas

apa bisa di tempelin pd theme free?
- Mas Zain Balas
  
  Sangat bisa, yang penting paham dengan penempatan kode html yang ada.
chalid Balas

Selanjutnya pasang kode responsif pada permintaan media setelah ini:
Maksudnya gimana gan ,maaf saya agak binggung di langkah ke 3
- Mas Zain Balas
  
  Itu kode untuk tampilan responsive gan, tanpa dipasang itu tampilannya tidak bisa responsive.
  Silahkan cari @media only screen pada edit HTML nanti ditaruh dibagian itu.
firman Balas

nyoba ya gan…. thanks ilmu nya
Akbar Balas

Min gimna cara buat menu dan sub menu kayak di blog ini
- Mas Zain Balas
  
  Cari aja mas tutorial cara membuat menu drop down di blogspot, kalau blog ini menggunakan wordpress.
Nikosusanto24 Balas

Maaf saya udah tapi yang muncul cuma menu1 menu2 menu2 ,
Cuma itu aja gmn solusinya
- Mas Zain Balas
  
  Itu tinggal ganti kak menu1 dll diganti sesuai kategori blog beserta link urlnya

Tutorial Membuat Menu Navigasi Responsive di Blog

Related Posts

15 Comments

Leave a Reply