Tutorial Hover Music Player #2

   

Lagi semangat ngepost tutobies nih Zahra. Kali ini tutorial tentang Hide Music Player yang Cute dan Keren :) Mau coba? Silahkan, sebelumnya credits to kak Ezah dan kak Salsa ^-^

Cara Pasang

• Designer : Dashboard > Layout > Add gadget > HTML/Javascript
• Classic : Dashboard > Template > Paste code setelah </style>

Codes

<style>
#cornerplayer
{z-index:999;
background-color:#FFF4F4;
border:2px solid #FFDEDE;
width:45px;
height:45px;
border-radius:0px 0px 50px 0px;
-moz-border-radius:0px 0px 50px 0px;
position:fixed;
overflow:hidden;
top:0px;
left:0px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;
}
#cornericon
{margin-bottom:44px;
margin-top:13px;
margin-left:-9px;
-webkit-transition: opacity 0.8s linear;-webkit-transition: all 0.8s ease-in-out;-moz-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;
}
#cornerplayer:hover
{width:200px;
height:52px;
-moz-border-radius:0px;
border-radius:0px;
box-shadow:0px 0px 2px 2px #FFE5E5;
}
#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:10px;
}
</style>
<div id='cornerplayer'><center>
<div id='cornericon'><img src="Url Icon Music"/></div>
<div> Your Music Code Here </div>
</center> </div><!--cornerplayer-->

Adjust Code

• Biru : Warna Background
• Hijau : Warna Border
• Merah : Icon Music Kamu
• Pink : Code Music Kamu

Semoga berhasil dan bermanfaat ya! Kalo belum paham atau gak berhasil silahkan tanya lebih lanjut di comment box. Jangan lupa kalo udah berhasil comment juga, hehe.. Thanks bye!

Thxx to Azzahra