Tutorial Hover Music Player #1

   

Hi all peeps, mau kayak dibawah? Lanjutt!

Live Preview

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 :)