Cara Membuat Menu Navigasi Responsive di Blog



Cara Membuat Menu Navigasi Responsive di Blog - Masih seputar Tutorial Blog, Kali ini saya akan membahas tentang Cara Membuat Menu Navigasi yang responsive di dalam Blog anda.

Dengan adanya menu Navigasi maka memudahkan pembaca anda dalam melihat Tata letak Halaman dan label yang anda buat. Menu Navigasi yang akan kita Buat ini sangat Responsive, Ringan dan juga sangat keren, Langsung saja ini dia Tutorial Nya.

CARA CARA
1. Silahkan anda masuk ke halaman utama Blog anda
2. kemudian pilih menu Tema
3. Kemudian Pilih Edit HTML
4. jika sudah terbuka Editor Template nya silahkan anda tempelkan kode di bawah ini tepat di atas kode ]]></b:skin>

/* 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}

5.Lalu Pasang Script Navigasi di bawah ini tepat di bawah kode </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>

6.supaya Menu Navigasi di atas menjadi Responsive, Silahkan pasang kode di bawah ini tepat di atas kode ]]></b:skin> atau kode </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}
}

7.setelah selesai di tempel kan semua kode di atas dengan benar, silahkan simpan template blog anda, kemudian lihat Hasil nya. pasti akan bagus.

CATATAN*
yang perlu di ingat oleh anda, sebelum praktikan dan menempel kan kode di atas, anda harus hapus dulu kode Script navigasi yang sebelum nya, jika sebelumnya anda sudah memakai menu navigasi, supaya Script yang saya berikan ini berjalan dengan Baik tidak ada error nya. terima kasih

Berlangganan update artikel terbaru via email:

3 Responses to "Cara Membuat Menu Navigasi Responsive di Blog"

Iklan Tengah Artikel 2