Cara Membuat Menu Navigasi Responsive

Sekarang sudah jamannya masyarakat indonesia menggunakan hp android untuk menjelajahi internet, untuk itu kita sebagai pembuat artikel blog / admin blog, menyesuaikan diri dengan trends. banyak orang buka blog lewat hape, maka blog kita harus bisa menyesuaikan tampilannya dihp juga. maka dari itu kali ini saya akan membagi gimana sih caranya buat menu navigasi responsive di andriod

ok sobat, ikut step berikut:

Tapi Sebelum mencoba Backup Dulu template Blog sobat, supaya jika gagal bisa dikembalikan lagi ke keadaan semula

1. Login ke blog sobat, lalu masuk ke meu theme >> Lalu Klik Edit HTML >> arahkan cursor ke script yang muncul di theme tadi lalu , tekan Ctrl+F dikeyboard untuk mencari kode berikut
   /]]></b:skin>  

 Lalu Copy Paste Script berikut tepat diatasnya /*-----Menu Navigasi Responsive ----*/ body {margin: 0px;} #menu{background: #00A0EE;color: #FFF;height: 45px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px font-size:12px; solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:1150px} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;} #menu a{display: block;line-height: 40px;padding: 0 16px;text-decoration: none;color: #FFF;} #menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out; background: #5FC6EB;} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{height: auto;overflow: hidden;width: 100%;background: #50B7DC;position: absolute;z-index: 99;display: none;} #menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none; text-shadow: none;border-bottom: 1px dashed #31AFDB;} #menu ul.menus a{color: #FFF;line-height: 35px;} #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out; transition: all .1s ease-in-out;} @media screen and (max-width: 800px){ #menu{position:relative max-width: 100%;} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;max-width: 100%;display:none} #menu ul.menus{width:100%;max-width: 100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:100%;max-width: 100%; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} } /*-----Menu Navigasi Responsive ----*/   

2. Tahap 2 cari code berikut atau mirip dengan code berikut:
   <div id='menu-wrapper'>
   Lalu Copy Paste Code berikut tepat dibawahnya
   <nav id='menu'> <input type='checkbox'/> <label>≡<span/></label> <ul> <li><a href='/'>Home</a></li> <li><a href='#'>Produk <font size='1'>▼</font></a> <ul class='menus'> <li><a href='#'>TV</a></li> <li><a href='#' title='Kerja'>Home Theater</a></li> <li><a href='#' title='Kerja'>Speaker</a></li> </ul> </li> <li><a href='#'>Promo<font size='1'>▼</font></a> <ul class='menus'> <li><a href='#' title='Kerja'>TV</a></li> <li><a href='#' title='Kerja'>Home Theater</a></li> <li><a href='#' title='Kerja'>Speaker</a></li> </ul> </li> <li><a href='#' title='SuratLamaran'>Support</a></li> <li><a href='http://www.mediafire.com/download/jnax1xixv2vjac9/Juragan_Lowongan_Kerja_Gratis.apk' title='Download'>Download app Android</a></li> <li><a href='#' title='Berita'>Berita</a></li> <li><a href='http://juraganlowongankerja.blogspot.co.id/search?q=Pekanbaru'>Contact</a></li> </ul> </nav>
3. Lalu Save dan lihat hasilnya
4. sekian terimakasih