BELAJAR BLOGGER DAN BERBAGI PENGALAMAN

IDRIS BROWSINGAN ~ BELAJAR BLOGGER

Monday, 1 June 2015

Membuat Navigasi Blog Responsive

Cara Membuat Navigasi Blog Responsive 

Banyak template yang keren tapi sayang ga Responsive jelas aga kurang nyaman bagi peminat blog apalagi menu Navigasi Blog  nya kurang jooss tapi tenang di sini saya akan posting Cara Membuat Navigasi Blog Responsive dengan mudah dan juga ringan untuk blog anda,  dengan menu Responsive blog anda akan terlihat rapih dan juga sangat mendukung segala jenis ponsel maupun desktop, anda cukup ikuti langkah di bawah ini.

Langkah Membuat Navigasi Blog Responsive

Membuat Navigasi Blog Responsive


1. Template > Edit HTML
2. Cari kode seperti di bawah ini, di bawah kode <head>, di bagian atas template:

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

3. Ganti dengan kode di bawah ini. Jika kodenya sudah seperti di bawah ini, ya... gak usah diganti, biarkan saja:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

4. Copy & Paste kode di bawah ini tepat di atas kode ]]</b:skin>

/*-----Responsive Menu ----*/
body {margin: 0px;}
#menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#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 14px;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: 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;}

#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}
#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. Copas kode di bawah ini tepat di bawah kode <body>
Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

8. Save Template and you are all done!!!

Gimana gan mudah bukan cara nya , maaf jika artikel nya kurang jelas atau banyak tulisan yang ga jelas dikarnakan saya tahap belajar dalam menulis artikel .. Jangan lupa Share ya gan .....

Membuat Navigasi Blog Responsive Rating: 4.5 Diposkan Oleh: puput putri
Previous
Next Post »

BERI PENDAPAT ANDA