Membuat Menu Vertikal (Vertical)

Menu vertikal ini sesuai kalau dipasang di sidebar kerana bentuknya berjajar setara vertikal (yelah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :
1. Login ke blogger terus pilih "Layout-->Edit HTML"
2. Masukkan kod berikut sebelum kod ]]></b:skin> atau sebelum kode </style> . Yang pentingnya mesti diletakkan di dalam Barisan kod CSS ler...

.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://i330.photobucket.com/albums/l411/nukeufo89/small%20hosting/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://i330.photobucket.com/albums/l411/nukeufo89/small%20hosting/blue2.gif');
}

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

Untuk memilih warna menu, perhatikan kod-kod (blue1.gif dan blue2.gif). Gantikan kod tersebut dengan pilihan warna dibawah ini. Misalnya jika kamu ingin memilih menu warna merah maka kodnya menjadi seperti ini :

.glossymenu li a{
background: white url('http://i330.photobucket.com/albums/l411/nukeufo89/small%20hosting/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://i330.photobucket.com/albums/l411/nukeufo89/small%20hosting/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 kod berikut ke dalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://global4life.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://www.global4life.co.cc">Free Ebook</a></li>
</li>
</ul>

Kod yang berwarna merah adalah linknya dan yg warna biru adalah teks yang disertakan. Kalau mahu menambahkan menu hanya buat lagi kod seperti yg berkelip-kelip dibawahnya.

Dah begitu aje. mudahkan????

*Don't forget to subscribe as reader or click bookmark below if you like this article and please leave a comment below..

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Menu Vertikal (Vertical) ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat Menu Vertikal (Vertical)