Membuat menu reponsive atau horizontal responsive menjadi sebuah trend tersendiri di kalangan blogger saat ini. Update untuk menunjang kinerja blog itu sangat penting,termasuk style blog itu sendiri.Membuat sebuah blog mampu menyesuaikan tampil di semua browser baik mobile maupun desktop atau sering kita sebut responsive desain tidaklah mudah.Kita harus merancang template tersebut dari header,menu,posting,sidebar dan masih banyak lagi agar mampu menyesuaikan diri dengan lingkungannya atau pas waktu SD sering kita dengar istilah Beradaptasi...wkwkwk.
Nah kali ini mas gusti akan menerbitkan sebuah tutorial membuat menu responsive di bloggeryang saya harap bisa digunakan oleh semua sobat blogger.Rekomendasi dari saya, menu ini sangat cocok digunakan untuk template toko online karna saat ini orang berbelanja itu sebagian besar melalui aplikasi mobile.Berikut penampakan menu horizontal drop down responsive blog gabungan HTML 5 dan CSS.
Membuat Responsive Drop Down Menu di Blogger/Blogspot
1. Loggin ke blogger seperti biasa > Pilih opsi Template.
2. Klik edit HTML > Kemudian cari kode </b:skin> ( Gunakan CRTL+F untuk mempercepat pencarian ).
3. Setelah itu langsung saja pastekan kode berikut tepat di atas kode </b:skin> .
/*-----Responsive Drop Down Menu oleh IBS ( idblogsite ) ----*/
body {
margin: 0px;
}
#menu{
background: #393939 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidjweFJy_7RuCYlxcHzyeudeVKh0fvpUy9IlbeR9YPVYZrdHrOMiVefLPRG52Nekjca9u1uMrqE2WzAb4TRrxRdNmWBvalNGhWTNlPA9ubeDeeeUJcoR-hIKCeV2W2TeGwXZbclrB9fXjv/s1600/back_ibs.png) repeat-x;
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{
border-right:1px solid #FFF;
float:left;
display:inline;
position:relative;
font:bold 0.9em Arial;
text-transform: uppercase;
}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;
}
#menu li a:hover{
color: #fff;
background: #696969;
}
#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: #696969;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{
display: block;
width: 100%;
font:normal 0.9em Arial;
text-transform: none;
border-bottom: 1px solid #7B7B7B;
border-top: 1px solid #595959;
}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}
#menu ul.menus a:hover{
background: #393939;
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}
}
Keterangan :
- Untuk edit warna background silahkan ganti kode #393939
- Untuk menyesuaikan lebar menu silahkan edit width:1024px
4. Sekarang cari lagi kode <div id='content-wrapper'> dan pastekan kode berikut ini tepat di atasnya :
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>IDBLOGSITE</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu A<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></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>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu B<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></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>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Menu C<font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>menu 1</a></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>
<li><a href='#'>menu 6</a></li>
</ul>
</li>
<li><a href='#'>Create Responsive Menu</a></li>
</ul>
</nav>
5. Simpan template dan lihat hasilnya.
0 komentar:
Post a Comment
>>SELAMAT BERKOMENTAR<<