Blogger

Cara Membuat Menu Navigasi Responsive di Blogspot

Update Terbaru:

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:

Cara Membuat Menu Navigasi Responsive di Blogspot

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.

Tags

Artikel Lainnya

13 Comments

  1. Selanjutnya pasang kode responsif pada permintaan media setelah ini:
    Maksudnya gimana gan ,maaf saya agak binggung di langkah ke 3

    1. 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.

Tinggalkan Balasan ke chalid Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Back to top button
Close