Tutorial : Hover Music Player #3

 

Hallow

Mau bagi2 tuto nih

Contoh preview dibawah

 

After hovering

• Dashboard > Template
• Ctrl + F dan search code </style>
• Copy lalu pastekan kode ini tepat diatas kode </style> tadi

#editthis{
position:fixed;
top:10px;
left:20px;
z-index:99;
}
#music1{
position:fixed;
padding:2px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#music1:hover #music2{
opacity:0;
margin-top:-25px;
z-index:-1;
}
#music1:hover #music3{
opacity:1;
margin-top:-5px;
z-index:99;
}
#music1:hover #musiclist{
opacity:1;
}
#music2{
opacity:1;
background-color:#fff;
border:1px dashed #e4e4e4;
padding:6px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#music3{
opacity:0;
position:fixed;
background-color:#fff;
border:1px dashed #e4e4e4;
width:60px;
height:26px;
z-index:99;
margin-left:-5px;
overflow:hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

• Kemudian, search code </head> / </style>
• Copy dan paste code ini tepat dibawah code </head> 
• Copy paste code itu dibawah </style> kalo gak ada </head>

<divid="editthis">
<div id="music1">
<div id="music2">
<img src="Url Icon Music"></div>
<div id="music3">
<div style="margin-top:4px;">
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=Url Mp3&t0=Azzahra Nafaraisya&total=1" quality="high" wmode="transparent"width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>
</div>
</div>
</div>

Adjust code
Merah : Gantikan dengan Url Icon Music kamu, bisa cari di freebies ya!
Biru : Gantikan dengan Url Mp3 kamu. Bisa dari billy player, kiwi6, delele. 

Credits : Nafaraisya