☏ Blog Idol ☎

Tutorial:Macam Mana Nak Buat Floating Circle Menu Tab

Hai korang !Tengah buat ape tu ???Makan eh?Sorry mengganggu hee =D...Okay hari ini farrah nak buat satu lagi tutorial iaitu cara-cara nak buat floating menu tab.Floating menu tab yang macam mana plak farrah??
(Klik untuk tumbesaran)

Inilah Floating Menu Tab yang farrah cakap tu.Sebenarnya farrah dapat coding die waktu farrah tolong kawan farrah buat blog yang ditempah.Mula-mula farrah ingat nak cari tuan punye tuto sebab nak cakap dekat die thanks sebab sharing tuto ni tapi since susah benor nak cai takpelah farrah buat jelarr tuto ni.

FIRST: Go To Dashboard -- Layout(Newer Blogger Interface) -- Add A Gadget -- HTML/Javascript 

SECOND: Copy code ni dan pastekan di ruangan HTML/Javascript:
<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: 150px; ">
<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>

THIRD: Tukarkan: Biru = Code Colour
                               Merah = Link pages korang
                               Orange = Tajuk Floating Button
                               Purple = Posisi left/right - top/bottom

FOURTH:Save!Done!Finish!

Selamat Mencuba =D

No comments: