Kali ini saya akan memposting Menu Drop Dawn Responsif baik di HP maupun di laptop sehingga blog kita kelihatan menarik dan profesional .
Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :
- Sign in di blogger
- Klik Opsi lainnya
- Klik Templete
- klik Edit HTML
- Centang tulisan Expand Widget Templates
- Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
- Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>
/* Responsive Drop Down Menu
--------------------------------- */
body {
margin: 0px;
}
#menu{
background: #222222; 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: #FF9900;
}
#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; width:100%; position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:90%; float:left; position:static;padding-left:20px}
#menu li{display:block;float:left;width:98%; 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
}
Kemudian cari kode- <header> : untuk menu di atas header blog
- </header>: untuk menu di bawah header blog
- Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> dan atau </header> untuk menu dibawah header
<nav id='menu'><input type='checkbox'/><label>≡<span style='color: #ff9900; width:150px; '>NAMA BLOG</span></label><ul><li><a href='https:// nama-alamat.blogspot.com /'>Home</a></li><li><a href='#'>About<font size='1'/></a><ul class='menus'><li><a href='https:// nama-alamat.blogspot.com' target='output'>Facebook</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Twitter</a></li></ul></li><li><a href='#'>Menu 1<font size='1'/></a><ul class='menus'><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li></ul></li><li><a href='#'>Menu 2<font size='1'/></a><ul class='menus'><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li></ul></li><li><a href='#'>Menu 3<font size='1'/></a><ul class='menus'><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 1</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 2</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 3</a></li><li><a href='https:// nama-alamat.blogspot.com' target='output'>Sub Menu 4</a></li></ul></li> </ul></nav>
Keterangan- Kode berwarna biru adalah warna background dan warna Menu
- Kode berwarna merah adalah Url tujuan, ganti dengan Url pada blognya kawan
Demikianlah postingan saya kali ini tentang cara membuat Menu Dropdown Responsif di HP atau Laptop diatas header atau dibawah header, semoga bermanfaat.