Bapak Browsingan - Cara Membuat Navigasi blog Responsive terbaru . teman teman pasti udah tau lah cara Membuat Navigasi blog Responsive tapi tenang saja teman teman karna yang saya ini lebih keren , mungkin bisa di bilang mirip seo elite . langsung aja lah ke pemasangan Navigasi blog Responsive.
Cara Pemasangan Navigasi blog Responsive :
1. Login pada blogger yang anda miliki.
2. Masuk ke menu " template " lalu pilih " Edit HTML ".
3. Cari kode <head> " untuk mempermudah pencarian tekan CTRL + F Lalu copy kode di bawah ini dan paste tepat di atas .
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
4. Cari kode ]]></b:skin> Lalu copy kode di bawah ini dan paste tepat di atas ]]></b:skin>
/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu{color: #FFF;height: 35px;
text-transform: uppercase;
font-weight:bold;
border-bottom: 2px solid #008000;
background: #3384CC ;}
#menu ul,#menu li{margin: 0;
padding: 0;
height: 35px;
}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#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: 170px;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;}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; 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}
}
body {margin: 0px;}
#menu{color: #FFF;height: 35px;
text-transform: uppercase;
font-weight:bold;
border-bottom: 2px solid #008000;
background: #3384CC ;}
#menu ul,#menu li{margin: 0;
padding: 0;
height: 35px;
}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;}
#menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;}
#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: 170px;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;}
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; 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}
}
5. Cari kode <body> Lalu copy kode di bawah ini dan paste tepat di bawah <body>
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>IJINBACA Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>
<input type='checkbox'/>
<label>≡<span>IJINBACA Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>
6. simpan template dan lihat hasil nya
jika anda binggun silahkan anda komentar di bawah 'akan saya jawab jika pertanyaan nya sama dengan postingan