membuat dropdown menu versiku

ok kawan, kali ini saya akan membagikan tutorial tentang membuat dropdown menu versi saya....kekekeke
langkah pertama

copy script dibawah ini:

#oxymenuposisi{width:900px; position:relative; float:left; margin-left=0px;}
#oxymenu{margin-left=0px;
width: 900px;
height: 40px;
background-image: url(http://i1189.photobucket.com/albums/z430/aguswaluyo1/background.jpg);
}
#oxymenu ul{
padding: 0;
margin: 0;
}
#oxymenu li{
float: left;
position: relative;
width: 112px;
list-style: none;
height: 40px;
}
#oxymenu li a{
height: 40px;
color: #FFFFFF;
text-align: center;
display: block;
text-decoration:none;
font-size:13px;
line-height:40px;
}
#oxymenu li a:hover{
color:#666666;
background-image: url(http://i1189.photobucket.com/albums/z430/aguswaluyo1/ul.jpg);
z-index: 27;
}
#oxymenu ul ul{
position: absolute;
top: 45px;
width: 130px;
visibility: hidden;
}
#oxymenu ul ul li{
width:200px;
position:relatif;
display: block;
background-image: url(http://i1189.photobucket.com/albums/z430/aguswaluyo1/ulul.png);
}
#oxymenu ul ul li a{
color:#FFFFFF;
text-align: left;
padding-left: 10px;
}
#oxymenu ul li:hover ul{
visibility:visible;
color: #000000;
z-index: 27;
}

2. buka form edit html
3. pastekan tepat diatas code ]]></b:skin>
4. save
5. buka tab elemen laman
6. pilih option tambah html/javascript...
copy+paste code dibawah ini kedalam form tambah html/javascript


<div id="oxymenuposisi">
<div id="oxymenu">
<ul>
<li><a href="http://aguswaluyo27.blogspot.com/"> Home</a></li>
<li><a href="">Pemrograman</a>
<ul><li><a href="http://aguswaluyo27.blogspot.com/2011/06/tutorial-java.html">java</a>
</li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/tutorial-c.html">C/C++</a></li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/tutorial-c.html">PHP</a></li>
</ul>
</li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/05/tutorial-blogspottip-dan-trik.html">Trik Blogspot</a>
</li>
<li><a href="">Indonesia</a>
<ul>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/kesenian-indonesia.html">seni Indonesia</a>
</li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/daftar-wisata-indonesia.html">Pariwisata</a></li>
</ul>
</li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/serbiku.html">Artikel</a></li>
<li><a href="">Materi Kuliah</a>
<ul>
<li><a href="">Matkul 1</a></li>
<li><a href="">Matkul 2</a></li>
</ul></li>
<li><a href="http://aguswaluyo27.blogspot.com/2011/06/sepuluh.html">Serba 10</a>
</li>
<li><a href="">About Me</a></li>
</ul></div></div>

selajutnya save...
keterangan: pada bagian link dan value bisa diganti sesuai keinginan anda...
pada kode <a href="...">###</a>
ganti =...(titik2 dengan url anda)
ganti=###(pagar) dengan nama tampilannya

semoga bermanfaat

semoga bermanfaat:::DDDD

salam oxy27

0 comments: