Membuat Menu Vertikal

Sebelumnya kita pernah
membahas tentang membuat
menu horizontal, nha sekarang
mari kita mencoba membuat
menu vertikal. Menu vertikal ini
cocok kalau dipasang di sidebar
karena bentuknya berjajar
sevara vertikal (ya iyalah).
Contohnya seperti gambar
disamping itu. Beginilah cara
membuatnya :
1. Login ke blogger trus pilih
"Layout-->Edit HTML"
2. Masukkan kode berikut
sebelum kode ]]> atau
sebelum kode .
Pokoknya ditaruh di dalam
Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN
MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://
kendhin.890m.com/blog/
vertical/ blue1.gif') repeat-x
bottom left;
font: bold 12px Verdana,
Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li
a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://
kendhin.890m.com/blog/
vertical/blue2.gif');
}
* html .glossymenu li { float: left;
height: 1%; }
* html .glossymenu li a { height:
1%; }
Untuk memilih warna menu,
perhatikan kode2 yang
berwarna merah (blue1.gif dan
blue2.gif). Ganti kode tersebut
dengan pilihan warna dibawah
ini. Misal jika kamu ingin memilih
menu warna merah maka
kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://
kendhin.890m.com/blog/
vertical/ red1.gif') repeat-x
bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://
kendhin.890m.com/blog/
vertical/ red1.gif');
Pilihan Warna menu vertikal :
Image
blue1.gif
blue2.gif
Image
green1.gif
green2.gif
Image
red1.gif
red2.gif
Image
pink1.gif
pink2.gif
Image
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page
Elements"
5. Pilih "Add a Gadget --
>HTML/JavaScript" kemudian
masukkan kode berikut
kedalamnya:

class="glossymenu">

• Home


• Trik Bloga>


• Free
  Template


• Free
  Ebook

Kode yang berwarna merah
adalah linknya dan yg warna
biru adalah teks yang
ditampilkan. Kalau mau
menambahkan menu tingal buat
lagi kode seperti yg berkedip2
dibawahnya.
Dah gitu aja. Gampang kan???? :D