Tutorial Hover Music Player #1

 
 
Hi all peeps, mau kayak dibawah? Lanjutt!
For template designer, denim, simple, watermark...
Dashboard --> Layout --> Add gadget --> HTML/Javascript

For blogskin and classic template...
Dashboard --> template --> paste code di bawah code  </style>

The codes :
<style type="text/css">
#music-player-rounded {
position:fixed;
left:30px;
top:5px;
width:25px;
height:25px;
padding-left:10px;
padding-top:10px;
background-color:#FFFFFF;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
border:3px dotted pink;
opacity:1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#music-player-rounded:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform: rotate(360deg);
left:50px;
top:30px;
}
.music-player {
margin-top:-10px;
margin-left:-55px;
width:25px;
height:25px;
padding-left:10px;
padding-top:10px;
background-color:#FFFFFF;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
border:2px solid #dddddd;
color:#777777;
opacity:0;
overflow:hidden;
font:12px Arial, Calibri, Cambria, sans-serif;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#music-player-rounded:hover .music-player {
opacity:1;
}
.music-player-embed {
margin-left:-115px;
margin-top:3px;
}
</style>
<div id="music-player-rounded">
<img src="URL Icon Music" />
<br />
<div class="music-player">
<div class="music-player-embed">
MUSIC CODE HERE
</div></div></div>
Diatur sendiri ya sesuka hati. Boleh tanya jika tidak mengerti :) Bye! Thanks to Ehza :)

1 comment:

Moshi - Moshi

Leave comment here
Request ? tell in cbox
Dont bad words

Obey the rules ? Free comment :)

1
2
3
4
5
 
Related Posts Plugin for WordPress, Blogger...