Tutorial : Buat Tab Menu Hover Simple Template

Assalamualaikum~ Hehehe.

Hari ini, aku nak share tutorial nak buat tab menu hover macam aku punya tu. Hover tu macam mana? Bila cursor sentuh warna dia bertukar.

So, this tutor request by Kak Nadya. //Follow her. ^^

1. Dashboard > Layout > Add A Gadget > HTML/JavaScript

2. Pastekan kod bawah ni..

<center>
<a class="menutab" href="URL ANDA">TITTLE</a>
<a class="menutab" href="URL ANDA">TITTLE</a>

<a class="menutab" href="URL ANDA">TITTLE</a>

<a class="menutab" href="URL ANDA">TITTLE</a>
<a class="menutab" href="URL ANDA">TITTLE</a>
</center>

Dah? Okay save. Siap ke? Belum. Hahaha.

Okayy, make sure.. korang add gadget tu bawah header okay?  Tapi kalau letak tepi dia jadi tepi lah. Dia akan jadi macam ni..

3. Template > Edit HTML

CTRL + F dan cari kod ni. 

]]></b:skin>

4. Copy code ni..

a.menutab {
background:url(URL BACKGROUND);
display: inline-block;
font: normal 10px 'Lucida Sans Unicode', Lucida Grande, sans-serif;
color: #000;
border: 2px solid #eee;
display: inline-block;
letter-spacing: 1px;
margin: 0 2px 0 0;
padding: 4px 9px;
text-transform: uppercase;
}
a.menutab:hover {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
border: 2px solid #ccc;
background:#2E2E2E;
color:#fff;

Warna Merah : Gantikan kod warna itu mengikut kesukaan korang. Boleh cari di http://html-color-codes.info/


Pastekan di atas kod yang di cari tadi. Di atas ok?  Preview dulu. Kalau jadi boleh save.. Kalau tak jadi.. inform me. mana tauu. ada salah kat mana-mana.

Faham tak anak-anak murid ku sayang? Hehehe.

Bye-bye~