Tutorial : menu tab hover tepi (berpusing-pusing)

Hye semua .. lama aku tak buat tutorial ..
hari ni nak buat tutorial la ..


tutorial apa ? ada jugak yang tanya cam ne nak wat menu tab hover
cam ni 



nak tutorial ni ? nak nak nak ?
nak nak nak ? dah lah tu sian dorang tunggu -,-

Mula mula Dashbaord ----> Layouts ----> Add a Gadget ----> HTML Java Script 

dan amik code ni paste dekat html ok


<style>
a.navoo, a.navoo2, a.navoo3, a.navoo4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;background: #ffffff;
color:#000;font-family:arial;
text-transform:uppercase;font-size:9px;
width:40px;height:40px;
border:5px solid #FFD685;padding:5px;
border-radius:1000px;}
a.navoo:hover, a.navoo2:hover, a.navoo3:hover, a.navoo4:hover{
text-align:center;color: #000000;font-size:9px;
border:5px solid #fff;background:  #FFD685;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px #eee;
box-shadow: 0 0 5px 5px #eee;
-webkit-transform: scale( -1.0) rotate( 540deg);
-moz-transform: scale( -1.0) rotate( 540deg);}
a.navoo{border:5px solid #FFFFFF;}
a.navoo2{border:5px solid #62A9FF ;}
a.navoo3{border:5px solid #62A9FF ;}
a.navoo4{border:5px solid #62A9FF ;}
a.navoo:hover{background: #ECFAFF ;}
a.navoo2:hover{background: #ECFAFF ;}
a.navoo3:hover{background: #ECFAFF ;}
a.navoo4:hover{background: #ECFAFF ;}
</style><div style="left: 4px; position: fixed; top: 150px;">
<a class="navoo2" href="http://xiaoxandriabunk.blogspot.com/"><br />Home</a>
<a class="navoo3" href="http://xiaoxandriabunk.blogspot.com/p/owner-blog.html"><br />Boss !</a>
<a class="navoo2" href="http://xiaoxandriabunk.blogspot.com/p/tutorial-tips2-dan-freebies.html"><br />Tuto</a>
<a class="navoo2" href="http://xiaoxandriabunk.blogspot.com/p/tempahan-dibuka-untuk-para-blogger.html"><br />Hire </a></div>




Perhatian  

1. Yang warna merah tuka dengan link korang ye
2. Yang warna biru tuka nama yang korang suka
3. Code color tuka warna korang suka ok

Dah tau ? ok bye .. 

10 Pengomen Hebat :

Unknown said...

mintak izin nak guna tuto ni yee

Kak H said...

eh, tapi tapi tapi kalau nk letak gambar menu tab sndiri camne?

Unknown said...

best juga tutorial ni blh cuba,,,,tQ.

Cik Aishah said...

Best jugak tutorial nie...nanti nk guna lah..:)

noraqilahjohari said...

qiela dh give up wat benda ni..
x pnah jadi..huhu T_T
anyway, thanks tau..blh try yang ni plak :)

http://noraqilahjohari.blogspot.com/2012/12/lembaga-jururawat-malaysia.html

hana said...

Nice tuto. :D sekarang memang trend pakai menu tab macam gini nampak simple dan menarik :)

#rajin buat tuto eh. :D#

Anonymous said...

thanks for the tuto..:)