VERTIKAL MENU

Cara buat Menu Vertikal (Vertical)

WONGTOP

Cara buat

Mari kita bahas bagaimana cara buat menu vertikal.

Menu vertikal ini lebih praktis kalau pemasanganya di sidebar di samping bentuknya ramping berjajar sevara vertikal...Namanya aja Vertikal ..!! oke... seperti gambar di atas...Yuk kita mulai :

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.

COPY PASTE SCRIPT

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

Memilih warna :
Untuk pilihan warna menu,lihat kode (blue1.gif dan blue2.gif). Ganti kode tersebut bisa di ganti dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

PILIHAN WARNA

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"

cOPY PASTE kode berikut kedalamnya:

COPY PASTE DI WIDGET

<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.


Artikel yang berhubungan :

1. Membuat menu vertikal
2. Cara menyimpan password
3. Cara buat read more vesi terbaru
4. Cara buat slide foto animasi
5. Buat kursor diikuti tulisan/teks
6. Membuat blog ber efek daun bertaburan
7. Membuat efek bintang berjatuhan
8. Buat blog super cepat
9. By Tag
10. Program program di bayar dollar
11. Top Menu