Membuat Vertical Menu

Salam semua.... sbg menunaikan janji saya pada pengunjung yg bergelar Pas Sabah di sini saya telah memuatkan satu tutorial berkaitan dengan cara membuat Vertical Menu.

Ikuti langkah ini:

1. Login ke Blogger.

2. klik Layout kemudian Edit HTML.

3. Copy kod CSS dibawah dan pastekan di bawah kod <b:skin><![CDATA[ kemudian terus save.

4. Seterusnya tambahkan HTML/Java Script- Klik Page Elements > Add a Gadget > HTML/Java Script. Copy code HTML dibawah dan paste ke dalam kotak content kemudian klik save.



Imej Vertical Menu
















KOD CSS

/* =-=-=-=-=-=-=-[verticalmenu]-=-=-=-=-=-=-=- */

ul {
list-style: none;
margin: 0;
padding: 0;
}
#verticalmenu {
width: 223px;
margin: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

#verticalmenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#verticalmenu li a:link, #verticalmenu li a:visited {
color: #FFFFFF;
display: block;
background: url(http://img58.imageshack.us/img58/929/menu88.gif);
padding: 8px 0 0 10px;
}

#verticalmenu li a:hover, #verticalmenu li a:active {
color: #6C7250;
background: url(http://img58.imageshack.us/img58/929/menu88.gif) 0 -32px;
padding: 8px 0 0 10px;
}

/* =-=-=-=-=-=-=-[End vertical]-=-=-=-=-=-=-=- */

KOD HTML

<div id="verticalmenu">

<ul>

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="About">About</a></li>

<li><a href="#" title="Services">Services</a></li>

<li><a href="#" title="Portfolio">Portfolio</a></li>

<li><a href="#" title="Store">Store</a></li>

<li><a href="#" title="Download">Download</a></li>

</ul>

</div>

CARA MENUKARKAN WARNA

Sebenarnya banyak style lagi yg boleh di buat, tapi untuk tutorial ini Hannya Style seperti diatas shaja yg saya tunjukkan(nk style lain nanti bila ada masa lapang akan di muat kan... tp ini bukan janji tau..hehehe).

-Bagi menukarkan warnanya anda pergi ke web ini dan savekan imej Vertical Menu di komputer anda.

-Selepas itu gunakan kreativiti anda sendiri utk menukarkan warnanya...tapi awas jgn sampai saiznya berubah(mungkin akan mencacatkan vertical Menu anda).

-Cara paling senang nak tukarkan warnanya anda bolehlah rujuk pada tutorial Tukar Warna Objek yg terdapat dalam blog kedua saya Photoshop Tutorial yang telah saya sediakan.

- Kemudian simpan di mana2 hosting, contohnya di imageshack, photobucket dan sebagainya.

- copy Direct Link nya dan tukarkan/gantikan dgn link yg baru.

- gantikan pada kod seperti ini (pada bahagian/text yg berkelip)- background: url(http://img58.imageshack.us/img58/929/menu88.gif)

Sekian selamt mencuba