Membuat Menu Vertikal

Sebelum ini aku pernah membuat posting tentang membuat menu horizontal, sekarang mari kita mencuba membuat menu vertikal. Menu vertikal ini sesuai kalau dipasang di sidebar karana bentuknya berjajar kebawah. Contohnya seperti gambar disebelah ini. Begini cara membuatnya :

1. Login ke blogger pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode </head>

<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>

3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . senang cerite ditaruk di dalam Barisan kode CSS la.

.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://blog.superinhost.com/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://blog.superinhost.com/vertical/blue2.gif');
}

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

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika anda ingin memilih menu warna merah maka kodenya menjadi seperti ini :

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

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.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

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

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://myp4u.blogspot.com">Trik Blog</a></li>
<li><a href="http://myp4u.blogspot.com" >Free Template</a></li>
<li><a href="http://myp4u.blogspot.com">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang dipaparkan. Kalau nak menambahkan menu tingal buat lagi kode seperti yg berkelip2 dibawahnya.

Dah mcm 2 aja. senang kan????

Free Support Solehpolysas blog with add Solehpolysas Blog link at Your Blog/Web. TQ.