Tutorial : Buat Tab Menu Hover Simple Template

15:51:00

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~ 

You Might Also Like

4 Love Letter(s)

  1. haha. blur. maybe sbb kite xde tab tu kot. kan?

    ReplyDelete
    Replies
    1. Hahaha. kenapa blurr pulakk? XD hahaha

      Delete
  2. Rajinnye buat tuto. Hehe lain kali tak tahu pape mntak Aina buat tuto lahh. ngeh3

    ReplyDelete
  3. ok dah jadik.. thanks cikgu aina sayang.. hewhew

    ReplyDelete