Cara Membuat Menu Vertikal Di Blog

Hi, sobat, kali ini saya akan berbagi kepada sobat tentang cara membuat menu vertikal. Menu ini sangat cocok sobat taruh pada begian side bar , sesuai dengan bentuknya yang memanjang. Tanpa basa-basi lagi, mari kita lihat cara pemasangannya di blog.....

1. log in di blogger

2. Buka Rancangan>Edit HTML

3. Cari kode ]]></b:skin> untuk permudah pencarian, sobat tekan CTRL+F dari keyboard

4. Jika sudah dapat, letakkan kode dibah tepat di atas kode  ]]></b:skin>

.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/red1.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/red2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

sobat dapat mengganti kode berwarna merah dengan warna lain. Misalnya, sobat ingin menggantinya dengan warna biru, maka, kode red1 sobat ganti dengan blue1 , dan red2 sobat ganti dengan blue2 .
Warna-warna yang dapat sobat gunakan:
- red1 , red2
- blue1 , blue2
- green1 , green2
- pink1 , pink2
- black 1 , black2

5. Jika sudah, Klik Simpan.
6. Selanjutnya sobat pergi ke Rancangan > Elemen Laman
7. Tambah Gadget > HTML/Java script
8. Masukkan kode di bawah:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://krisantipsdantrik.blogspot.com">Tips dan Trik</a></li>
<li><a href="http://blogger.com" >Blogger</a></li>
<li><a href="http://facebook.com/krisan.paulino">MY FACEBOOK</a></li>
</li>
</ul>

kode bewarna  ungu merupakan link dan kode biru adalah tulisan yang akan muncul. Untuk menambah menu, tambahkan saja kode

<li><a href="Masukkan URL">Tulisan yang muncul</a></li>
</li>
</ul>

kode merah ganti dengan url sobat, sedangkan biru ganti dengan tulisan yang sobat inginkan.
9. Klik Simpan dan Lihat hasilnya.......