Membuat Menu Vertikal (Vertical)

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 ]]></b:skin>
atau sebelum kode </style> . 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 :

blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

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:

<ul id="verticalmenu" class="glossymenu">

<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik
Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free
Template</a></li>
<li><a href="http://getebook.co.cc">Free
Ebook</a></li>
</li>
</ul>

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