Cara Membuat Menu Vertikal di Blog

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://zonatipsdaninfo.blogspot.com">Tips dan Trik</a></li>
<li><a href="http://blogger.com" >Blogger</a></li>
<li><a href="http://facebook.com/linkfacebookanda">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.......