Floating Mp3 Player vers 2

      Tutorial floating mp3 player ini direquest oleh temen blogger bernama Fida:) Klik disini untuk melihat floating mp3 player versi pertama. Dan tutorial ini cuma bisa buat template classic/blogskins. Preview :

 

setelah dihover...

Live preview

• Log in blogger > Template
• Tekan ctrl + F di keyboard lalu cari kode </style>
• Copy lalu pastekan kode ini tepat diatas kode </style> tadi

#editthis{
    /* EDIT THIS STUFF TO POSITION YOUR MUSIC PLAYER */
    position:fixed;
    top:10px; /* YOU CAN CHANGE THIS TO BOTTOM */
    left:20px; /* YOU CAN CHANGE THIS TO RIGHT */
    z-index:99;}

/* I DON'T RECOMMEND TOUCHING THIS STUFF */
#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{
    /* THIS IS THE GIF DIV */
    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{
    /* THIS IS THE ACTUAL MUSIC PLAYER DIV */
    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, cari lagi kode </head>
• Copy lalu pastekan kode ini tepat diatas kode </head> tadi

<div id="editthis">
	<div id="music1">
	<div id="music2">
	<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. -->
	<img src="Url Icon Music"></div>
	<div id="music3">
	<Div style="margin-top:4px;">
	<!-- YOUR MUSIC CODE GOES HERE, RIGHT AFTER THIS LINE. -->
	<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=Url Mp3&t0=Anugerah Salsa&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 kesukaanmu.
 http://sl.glitter-graphics.net/pub/439/439087zf2mcug0by.gif
 http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif
  http://dl.glitter-graphics.net/pub/695/695351ug3twpiwlh.gif
  http://dl2.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif
  Biru : gantikan dengan url mp3 yang kamu suka.

• Jika sudah, silahkan disave dan sudah selesai!

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest