Cara Mudah Membuat Menu Navigasi Responsive di Blog

Buat anda yang baru terjun kedunia blogger dan belum tahu apa itu Menu Navigasi dan dan bagai mana cara membuat menu Navigasi Responsive di blog, "baiklah kalo begitu draplan akan jelaskan secara detil.

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.

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

Berikut Tutorial Cara Mudah Membuat Menu Navigasi Responsive di Blog

  • Silahkan login akun blogger anda, kemudian pilih “Template” Lalu klik “Edit HTML”.
  • 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}

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

<div class='menunav'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiETfX63Sdhyphenhyphenhemh88QJ5tfIai48XTZgXu6G5ewesniDfyz372ikDKX-qd-BfdAnpidH1ZEthVz4hgNM6I4EvwA-TU2JoGj2gLC0A7s2u-kVbJIn9mv59KuYiQrXkbPBy8zk3NDoAB9orY/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 Mudah Membuat Menu Navigasi Responsive di Blogspot agar blog anda lebih responsive dan pengunjung dapat melihat menu navigasi dari semua perangkat. Sekian dan teimakasih telah berkunjung, sampai ketemu di artikel lainnya dari draplan.
Hendra Hermawan Hidup ini bukan hanya untuk mencari yang terbaik namun lebih kepada menerima kenyataan

0 Response to "Cara Mudah Membuat Menu Navigasi Responsive di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel