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~ 

Aina Akmal

AINA AKMAL. Seorang gadis comel yang berasal dari utara Malaysia. Punya impian sebesar alam semesta dan seorang yang bercakap banyak. Pemegang status pelajar seumur hidup. Keep learning and never give up adalah prinsip beliau. Masih bujang terang tang tang kata orang. Nak berkenal? Boleh jenguk bawah ni.

4 comments:

  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