Posted on Tuesday, 4 December 2012 at @ Tuesday, December 04, 2012 , you can leave your comment (4)
MY OWN CODING.PLEASE CREDIT TO ME IF YOU USE THIS !Hai! Assalamualaikum!
Preview:
click here for a live preview
Template designer:
1.Paste dekat HTML/Javascript.
Blogskisns:
1.Paste dekat mana yang korang nak asalkan ianya selepas kod </style>
<style>a.nav,
a.nav1,
a.nav2,
a.nav3{
border:10px double pink;
border-radius:200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
background:pink;
width:50px;
height:50px;
padding:5px;
font-family: trebuchet ms;
font-size: 10px;
text-align: center;
text-decoration: none;
letter-spacing:2px;
text-transform: uppercase;
display:inline-block;
color:transparent;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease-in-out;
margin-right:50px;
}
a.nav{
background:#E799A3;
left:680px;
top:20px;
position:fixed;
}
a.nav:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate (360deg);
-o-transform: rotate (360 deg);
transform: rotate(360deg);
top:20px;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;
color:#666;
background:#fff;
border:1px solid pink;
}
a.nav1{
background:#F9A7B0;
left:800px;
top:20px;
position:fixed;
}
a.nav1:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate (360deg);
-o-transform: rotate (360 deg);
transform: rotate(360deg);
top:20px;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;
color:#666;
background:#fff;
border:1px solid pink;
}
a.nav2{
background:#FAAFBA;
left:920px;
top:20px;
position:fixed;
}
a.nav2:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate (360deg);
-o-transform: rotate (360 deg);
transform: rotate(360deg);
top:20px;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;
color:#666;
background:#fff;
border:1px solid pink;
}
a.nav3{
background:#E7A1B0;
left:1040px;
top:20px;
position:fixed;
}
a.nav3:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate (360deg);
-o-transform: rotate (360 deg);
transform: rotate(360deg);
top:20px;
-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease-in-out;
color:#666;
background:#fff;
border:1px solid pink
}</style>
<a class="nav" href="LINK"><br/>ABOUT</a>
<a class="nav1" href="LINK"><br/>CBOX</a>
<a class="nav2" href="LINK"><br/>LINKS</a>
<a class="nav3" href="LINK"><br/>ENTRY</a>
p/s:jangan lupa adjust dia punya position k !