Tutorial Menu Tab / Navigation Hover new style

لسّلا م عليکم ورحمةالله وبرکة | Salam sejahtera.

Hai dan salam sejahtera ^_^
Okey, sekarang baru ada masa nak buat tuto sebab homework semua dh siap -_-

Tuto ni direquest oleh gerangan siapa najla pun tak tahu. Sebab dia tanya kat ask.fm dan dia anonymouskan dirinyaaa. Tapi takpe, najla teruskan!

Baca bismillah banyak-banyak dulu nanti takut tak jadi >.<

So, najla pun taktahu nak buat live preview camne tapi korang cuba jelah.

Eh, najla credit to kak nabilah yerr. Thank you kak!

Ok.. Now buat macam biasa..

1. login blog --> dashboard --> template --> edit html

2. Cari kod ini


/* Content
----------------------------------------------- */


3. Now copy code ni pula dan paste di bawah kod yg korang cari tadi.


#naviday {
display:table-cell;
vertical-align: middle;
height:55px;
margin:-1px;
border-left:1px solid #ffffff;
padding:4px 6px 5px 5px;
color: #ffffff;
background: #000;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}
#naviday:hover {
border-left:3px solid #ffffff;
color: #000000;
background: #BDBDBD;
-moz-border-radius: 0px 0px 70px 70px;
-webkit-border-radius: 0px 0px 70px 70px;
border-radius: 0px 0px 70px 70px;
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
transition: all 0.9s ease;
}


Warna merah tu boleh ubah warna. SINI
Yang lain tu pandai-pandai adjust sendiri ye.

4. Preview, save.

Sebenarnya kalau korang preview memang takde apa-apa kan? Sebab belum selesai lagi :)

5. Now go to loyout/page element.

6. Copy this code and paste it into html/javascript.

<a id="naviday" href="LINK" title="TITLE">TITLE</a>


Ok. sama je. adjust2 :) Ikutlah berapa bilangan yang korang nak. Kalau nak lagi, copy code step 6 dan ulangnya sebanyak mana yg korang nak ^^

7. Save. And you're done!

Dah jadi? kalau tak faham tanya najla.

Bye. Assalamualaikum! :)

Comments