cara membuat menu vertikal

cara membuat menu ke bwah
memang dalam tampletes bawaan dari blogger ataupun yang hasil dari downloadtan tidak tersedia menu vertikal atau sering di sebut menu ke bawah,untuk membuat menu ini kamu harus menambahkan sedikit kode html,yang di pasang di html, dan javaskipt.
jika kamu belum tau juga sepeti apa menu vetikal,lihat seperti punya saya di samping kiri dan kanan yang berwarna biru?

langsung saja kita ke cara membuatnya:
1.login di blogger dengan email dan password anda.
2.masukke layout/rancangan,pilih html,jangan lupa beri cek pada explan wedget.
3.cari kode seperti ini ]]></b:skin> dengan menggunakan (ctrl+fmerah).
4.Masukan kode di bawah ini sebelum kode ]]></b:skin> tadi.

.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%; }

Perlu di perhatikan,kode di atas ini nnti akan menghasilkan menu bewarna biru seperti punya saya pada gambar yang sudah anda lihat di atas,namun jika anda menginginkan warna yang berbeda bisa menggantinya,perhatikan kode yang berawarna hijau di atas.jika kamu ingin mangganti dengan warna merah,ganti kode yang berwarna hijau tadi menjadi seperti ini.

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/ red1.gif') repeat-x bottom left;

dan seperti ini:

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/ red1.gif');

5.kemudian save.
6. Lalu pergi ke menu "Page Elements"
7. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="http://www.pine2.blogspot.com/">Home</a></li>
<li><a href="http://pine2.blogspot.com/search/label/tips%20blogger">Tips Blogger</a></li>
<li><a href="#" >menu anda</a></li>
<li><a href="#">menu anda</a></li>
</li>
</ul>

8.keudian save,dan lihat hasinya,perlu anda ketahui,di atas ini merupakan contoh saja,jika anda ingin membuat banyak menu tinggal buat kode lagi di bawahnya.seperti ini:
<li><a href="#" >menu anda</a></li>
dan ganti alamat dan menu yang di tampilkan itu,semoga berhasil???!!!