☏ Blog Idol ☎

Tutorial:Macam Mana Nak Letak Cute Icon Di Atas/Bawah Floating Circle Menu Tab Button

Hye korang!Hurmm lama jugakkan tak update blog!Sorrylah sebab kan nak bukak sekolah dah so ayah farrah tak kasik dah bukak laptop yg farrah bukak laptop sekarang ni pon sebab mak farrah kasik itupon 10 minits only.Ok without wasting MY time...mari kite teruskan tuto ini.Mesti korang dok pikir apokobondolah Floating Circle Menu Tab Button tuh ?Ok takpe2 korang pergi kat --sini-- nanti korang tahulah apa yang farrah maksudkan.

First - Go To Dashboard -- Layout -- *Pergi dekat HTML/Javascript untuk tuto floating circle menu tab kalau tak ada korang ikut tuto farrah tu ok *

Second - Ok sekarang gi ve your attention pada warna merah n at the same time korang tengok jugak pada warna biru.OK!Warna biru itu ialah penambahan yang korang kena di atas dan dibwah warna merah itu.N then untuk url iconnye plak korang boleh tukarkan ikut suke hati korang 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: #fff;
color:#000;font-family:arial;
text-transform:uppercase;font-size:9px;
width:40px;height:40px;
border:5px solid #3bb9ff;padding:5px;
border-radius:1000px;}
a.navoo:hover, a.navoo2:hover, a.navoo3:hover, a.navoo4:hover{
text-align:center;color: #fff;font-size:9px;
border:5px solid #fff;background:  #3bb9ff;
-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 #3bb9ff ;}
a.navoo3{border:5px solid #3bb9ff ;}
a.navoo4{border:5px solid #3bb9ff ;}
a.navoo:hover{background: #3bb9ff ;}
a.navoo2:hover{background: #3bb9ff ;}
a.navoo3:hover{background: #3bb9ff ;}
a.navoo4:hover{background: #3bb9ff ;}
</style><div style="left: 4px; position: fixed; top: 230px;">
<center><img src="http://dl10.glitter-graphics.net/pub/2070/2070280bnokv91n0f.gif"/>
<a class="navoo2" href="http://lovelypages.blogspot.com/"><br />Home</a>
<a class="navoo3" href="http://lovelypages.blogspot.com/p/about-me.html"><br />Me</a><img src="http://dl10.glitter-graphics.net/pub/2070/2070280bnokv91n0f.gif"/></center>
Fourth - Save n finish!

No comments: