Posted on Saturday, 27 October 2012 at @ Saturday, October 27, 2012 , you can leave your comment (0)
MY OWN CODING.PLEASE CREDIT IF YOU USE THIS.Hai! Assalamualaikum!
Preview:
Disebabkan aimad malas nak buat live preview,so,kalau korang nak tengok live preview,korang paste kod dekat bawah tu di http://htmledit.squarefree.com/
Template designer:
1.Copy code di bawah.
2.Paste dekat HTML/Javascript.
Blogskins:
1.Copy code di bawah.
2.Paste dekat bawah </style>
<style>
.nav{
position: fixed;
width: 40px;
height: 30px;
padding: 10px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background: #E4287C;
font:normal 11px "trebuchet ms" #fff;
text-align: center;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.0s ease-in-out;
-ms-transition: 0.8s ease-in-out;
}
.nav:hover{
border-radius: 200px;
-webkit-transition: 1.10s ease-in-out;
-moz-transition: 1.10s ease-in-out;
-ms-transition: 1.10s ease-in-out;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.nav1{
position: fixed;
width: 40px;
height: 30px;
padding: 10px;
background: #F6358A;
font:normal 11px "trebuchet ms" #fff;
text-align: center;
margin-left: 60px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
}
.nav1:hover{
border-radius: 200px;
-webkit-transition: 1.10s ease-in-out;
-moz-transition: 1.10s ease-in-out;
-ms-transition: 1.10s ease-in-out;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.nav2{
position: fixed;
width: 40px;
height: 30px;
padding: 10px;
background: #E4317F;
font:normal 11px "trebuchet ms" #fff;
text-align: center;
margin-left: 120px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
}
.nav2:hover{
border-radius: 200px;
-webkit-transition: 1.10s ease-in-out;
-moz-transition:1.10s ease-in-out;
-ms-transition: 1.10s ease-in-out;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.nav3{
position: fixed;
width: 40px;
height: 30px;
padding: 10px;
background: #F52887;
font:normal 11px "trebuchet ms" #fff;
text-align: center;
margin-left: 180px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
}
.nav3:hover{
border-radius: 200px;
-webkit-transition: 1.10s ease-in-out;
-moz-transition: 1.10s ease-in-out;
-ms-transition: 1.10s ease-in-out;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
.nav4{
position: fixed;
width: 40px;
height: 30px;
padding: 10px;
background: #E4287C;
font:normal 11px "trebuchet ms" #fff;
text-align: center;
margin-left: 240px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-ms-transition: 0.8s ease-in-out;
}
.nav4:hover{
border-radius: 200px;
-webkit-transition: 1.10s ease-in-out;
-moz-transition: 1.10s ease-in-out;
-ms-transition: 1.10s ease-in-out;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
</style>
<a class="nav" href="LINK">Tuto</a>
<a class="nav1" href="LINK">bies</a>
<a class="nav2" href="LINK">Tuto</a>
<a class="nav3" href="LINK">bies</a>
<a class="nav4" href="LINK">Tuto</a>
