Cara Menciptakan Hidangan Navigasi Responsive

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

ok sobat, ikut step berikut:

Tapi Sebelum mencoba Backup Dulu template Blog sobat, agar jikalau gagal dapat dikembalikan lagi ke keadaan semula

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

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

Tahap 2 cari code berikut atau seolah-olah dengan code berikut:
<div id='menu-wrapper'>
Lalu Copy Paste Code berikut sempurna 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>
Lalu Save dan lihat hasilnya
sekian terimakasih