DI BLOGSPOT
Cara membuat drop down menu di blog ~ Banyak sekali blogger yang sudah memasang
drop down menu di blog atau disebut juga menu bar untuk mengatur tampilan blog,
Umumnya memasang menu drop down secara horizontal diletakkan di bawah header sesuai
dengan
keinginan
admin
blog.
Kali ini saya akan memberikan cara membuat menu drop down horizontal menggunakan CSS
secara sederhana saja, ikuti saja langkah-langkah di bawah ini untuk memasang menu drop
down horizontal tersebut:
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
background: #000;
color: #fff;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #979797 url(overlay.png) repeat-x 0 -40px;
background: #666666 url(overlay.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
background: #7d7d7d url(overlay.png) repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url(overlay.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}
6. Klik Simpan Template
Nah, kode CSS di atas sudah tersimpan di dalam template anda, masih ada 1 langkah lagi
yang harus anda lakukan agar menu drop down horizontal blog anda siap untuk digunakan.
artikel terkait : cara membuat menu scroll
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li class='last'><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
5. Silahkan edit dan ganti kode # dengan alamat url tujuan yang sesuai keinginan anda dan
klik
Simpan
6. Aturlah posisi widget menu drop down horizontal sesuai dengan tempat yang anda
inginkan, biasanya diletakkan di bawah header blog,.silahkan anda coba geser-geser letaknya
sendiri jika sudah mantap maka klik simpan atau save. Contoh menu drop down bisa anda
lihat
seperti
yang
saya
gunakan
di
blog
ini.
Demikianlah cara membuat menu drop down, mudah-mudahan dapat memberikan manfaat
untuk anda, salam blogger.