by gyapo

<! --- fague music player by gyapo (bottom corner player)

(above </style>)
#playertab
     {position:fixed;z-index:999;
     bottom:0px;
     left:-170px;
     height:10px;
     padding:1px 8px 3px 1px;
     letter-spacing:2px;
     background-color:#000;
     -moz-border-radius:0px 10px 0px 0px;
     border-radius:0px 10px 0px 0px;
     -webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-          out;-o-transition: all 1s ease-in-out;}

#mus
     {float:left;
     color:#fff;
     padding-left:100px;
     -webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}

#playertab:hover #mus
     {padding-left:0px;
     opacity:0;}

#playertab:hover
     {left:0px;}

(after <body>)

<div id='playertab'>
<div style='float:left;width:120px'>MUSIC PLAYER CODE</div>
<div id='mus'><img src='http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif' style='margin-right:8px;'/> musique</div>
</div><!--playertab-->


<! unnamed by gyapo (bottom corner player)
(above </style>)
#music
     {position:fixed; bottom:20px; right:25px;
     padding-top:12px;  padding-bottom:12px; text-align:center; height:10px; width:34px; overflow:hidden;
     border:3px solid #ddd;
     color:#888;
     -moz-border-radius: 17px 17px 17px 17px;
     border-radius:17px 17px 17px 17px;
     -webkit-transition: opacity 0.7s linear;
     -webkit-transition: all 0.7s ease-in-out;
     -moz-transition: all 0.7s ease-in-out;
     -o-transition: all 0.7s ease-in-out;
     background-color:#fff;
     z-index:999;}


#musicplayer
     {padding-top:15px;}


#music:hover
     {border:3px solid #bbb; padding:5px; height:45px; width:140px;}

(after <body>)

{block:IndexPage}
<div id="music"><center><img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif"/></center>
<div id="musicplayer"><center>MUSIC PLAYER CODE</center></div>
</div>
{/block:IndexPage}


<! Music corner by gyapo (bottom side corner)
#cornerplayer
{z-index:999;
background-color:#000;
width:50px;
height:50px;
border-radius:0px 50px 0px 0px;
-moz-border-radius:0px 50px 0px 0px;
position:fixed;
overflow:hidden;
bottom: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-top:25px;
margin-bottom:20px;
margin-left:-5px;
-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;
-moz-border-radius:0px;
border-radius:0px;}

#cornerplayer:hover #cornericon
{margin-top:10px;
margin-left:0px;
margin-bottom:4px;}

(after <body>)

<div id='cornerplayer'><center>
<div id='cornericon'><img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"/></div>
<div> MUSIC PLAYER CODE HERE </div>
</center> </div><!--cornerplayer-->


<! Maestro by gyapo (below sidebar)
(paste below the <body> )

<div id="music">
<div class="question">musique maestro !</div>
<div id="player"><center>MUSIC PLAYER CODE</center></div>
</div>

(to paste above  </style> )

if you want the player to appear on hover of “musique maestro !” paste this one :

#music
{height:16px;
width:150px;
background-color:#000;
font-size:10px;
font-style:italic;
letter-spacing:2px;
margin-top:10px;
text-align:center;
color:#fff;
overflow:hidden;
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;}

#music:hover
{height:35px;}

.question
{padding-bottom:3px;}

#player
{background-color:#fff;
padding-top:5px;
padding-bottom:5px;}

(if you want the player to be constantly displayed paste this one:)

#music
{height:35px;
width:150px;
background-color:#000;
font-size:10px;
font-style:italic;
letter-spacing:2px;
margin-top:10px;
text-align:center;
color:#fff;
overflow:hidden;
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;}

.question
{padding-bottom:3px;}

#player
{background-color:#fff;
padding-top:5px;
padding-bottom:5px;}