Tutorial Hover Music Player #4

    Heyy guys Bagi2 tuto lagi niehSpecial Credit: Kak Dila

Masuk ke akun blog kamu blogger.com

Dashboard >> Tata Letak

Klik Tambahkan Gadget

Copy kode dibawah ini

<style>
.song {
padding:10px;
border-bottom-right-radius:5px;
background:#fff;
}
#sing {
text-align: center;
position:fixed;
left:28px;
top:-50px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#sing:hover {
top:-5px;
}
#bukak {
height:45px;
background:#fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 50px;
align:center;
}
</style>
<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 Short stack, short stack, short stack, short stack;
-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>
<style>
.song {
padding:10px;
border-bottom-right-radius:5px;
background:#fff;
}
#sing {
text-align: center;
position:fixed;
left:28px;
top:-50px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#sing:hover {
top:-5px;
}
#bukak {
height:45px;
background:#fff;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 130px;
align:center;
}

</style>
<div id="sing">
<div class="song">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="98" height="20">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" />
<param name="bgcolor" value="#fffffff" />
<param name="FlashVars" value="mp3=URL MP3 KAMU&amp;autoplay=1&amp;bgcolor=fffffff&amp;loadingcolor=ff9eff&amp;buttoncolor=ffcccc&amp;slidercolor=ffcccc" />
</object></div>
<div id="bukak"><br/><img src="http://media.tumblr.com/03a3d116d2a8a97e11249919689c10e0/tumblr_inline_mgpj0bdGi41qdlkyg.gif"/><small>LAGUKU</small><img src="http://media.tumblr.com/03a3d116d2a8a97e11249919689c10e0/tumblr_inline_mgpj0bdGi41qdlkyg.gif"/></div></div>

note:
Merah: Ganti dengan URL MP3 kamu (INGAT: formatnya harus .mp3).
Biru: Boleh kamu ganti tulisan itu dengan apa saja sesuai yang kamu mau.
 Save dan lihat hasilnya