Jquery Mp3 Player Hover #2

   Assalamu'alaikum. Thanks to kak Ehza for the code :3 Aku suka banget mp3 player ini, tapi aku sengaja gak pasang. Retutor? Give credits and link to Me and kak Ehza!

Live preview

Firstly : for template designer , denim , simple ,watermark...

Dashboard --> Layout --> Add gadget --> HTML/Javascript

Firstly : for blogskin , classic template...

Dashboard --> template --> paste the code after </style>

     The 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="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"/></div>

<div> MUSIC CODE HERE </div>    

</center> </div><!--cornerplayer-->

The notes :

Blue text : Color code

Orange text : Width and height of the music player before and after hover

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest