11.11.13 - Heartless Theme 10.18.13 - Andare Theme 09.14.13 - Mayonaka (Redo)

I know a bunch of people have been asking about this music player, so here it is!

LIVE PREVIEW [ HERE ]

CREDIT: music icon provided by ixora, music player codes from billy.
NOTE: You must use the billy music player for this to work. Also, you should be a little familiar with CSS/HTML in order to move its location!

CODES: These should be pasted into your existing code right before </style>:

#museek {  
background-color: #000;
height:20px;
width:25px;
z-index:3;
margin-left:20px;
margin-top:20px;
padding-top:5px;
padding-bottom:0px;
position:fixed; 
text-align:center;
overflow:hidden;
opacity:1;
}


#musicplayer {
position:fixed;
z-index:9;
margin-top:20px;
margin-left:20px;
height:25px;
width:25px;
overflow:hidden;
opacity:0;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
}


#musicplayer:hover {
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
margin-top:45px;
background-color:#143386;
opacity:1;
}

Now, immediately following the <body> tag, put these codes in:

<div id=”musicplayer”><center><embed style=”margin-left:-18px;” src=MUSIC CODES GO HERE/></center></div>

<div id=”museek”><img src=”http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif”/></div>

If you want this player to be placed in a different location, you’ll have to move the second half of the codes within the <body> tag, perhaps into the sidebar section, etc etc… it all depends on the theme you are using and the existing codes.

You can also move the player around by messing with the margins in the codes that go above the </style> tag, BUT JUST REMEMBER that you also have to change the codes found in the hover effect as well. So, if you change margin-top or margin-left in the #museek { section, it must match whatever you changed it to in #musicplayer { section as well, and then you MAY have to adjust the #musicplayer:hover { section for margin-top. It all just depends on where you want to place it, etc. 

IMPORTANT: When you go to paste your music codes from billy into the code, REMOVE THE <embed src= beginning section! You want it to look like this:

<div id=”musicplayer”><center><embed style=”margin-left:-18px;” src=”http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://dl.dropbox.com/u/1792549/Levels%20-%20Avicii%20(Skrillex%20Remix).mp3&t0=&total=1” quality=”high” wmode=”transparent” width=”200” height=”10” name=”billy” align=”middle” type=”application/x-shockwave-flash” /></center></div>

[disregard the Skrillex in the player vbjdksbvks] You may also need to retype the quotation marks.

Anyway, please enjoy!! :D