Kemarin
saya ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara
membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu
horisontal yang terdapat di bawah header blog. Dan apabila mouse kita letakkan
ke salah satu menu tersebut akan muncul sub menu yang susunannya ke bawah. yang
tentunya menu yang berkaitan Ah... pokoknya gitulah menurut pengertian saya. Untuk
lebih jelasnya temen-temen semua dapat lihat disini. Bagaimana menarik kan?
Untuk cara membuatnya, saya akan
jelaskan satu persatu, perhatikan baik-baik ya..........
1. Cari kode berikut ]]>
2. Lalu letakkan kode berikut ini.
#navdropdownmenu{
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ghdVIxAbAgJi9Ip_b9Ss0g6kNV6DwrN_yCtxxYqBoprDWrwVAo7WRD8dpERWEMKKBWHTrVdXRZC3ogus9NHy3MaKsXatGO8Hu7oQ8wZtLQooNTxU0M2Mnf5z6oOAEJehgLjovQWnAm1B/s800/navbar.gif)
repeat-x top;
width:700px;
height:auto;
margin:0;
padding:0;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link,
#navdropdownmenu li a:visited{
color:#000000;
font-weight:bold;
display:block;
text-shadow: 0px 1px 1px #fff;
padding:9px 10px 9px 10px;
font-size: 12px;
font-family: verdana;
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:#9f9f9f;
color:#ffffff;
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px;
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li
a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:#99C9FF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ghdVIxAbAgJi9Ip_b9Ss0g6kNV6DwrN_yCtxxYqBoprDWrwVAo7WRD8dpERWEMKKBWHTrVdXRZC3ogus9NHy3MaKsXatGO8Hu7oQ8wZtLQooNTxU0M2Mnf5z6oOAEJehgLjovQWnAm1B/s800/navbar.gif)
repeat-x top;
width:200px;
border-width:1px;
border-style:solid;
border-color:#575757;
}
#navdropdownmenu li ul li a:hover{
background:#000000;
color:#ffffff;
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
}
Oya,. jika
anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari
navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
4. Dibawahnya, ketikkan kode berikut.
Gantilah
tulisan http://wongsuruh.blogspot.com
dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa
menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
6.
Lihat hasilnya.
Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar
yang ada di bawah, saya akan berusaha menjawabnya.
0 comments:
Post a Comment