Follow +
Dashboard
LINK NAME
LINK NAME
LINK NAME
Home ⌂

Navigation ❤

Welcome


Hello there. You can insert anything here as your introduction into your world of blogging. So tell me, y you love to blog? Bye ❤

  You can put anything here as well!

love blossom


Credits

   Full template by: miraaaa90    Blogskin: BubbleGum90


Music Player

Sunday, February 3, 2013 @ 12:35 AM
0 Comment(s)

Mini version of music player. 

Before and after hover. Situated on top of the blog. Like this.


Since youtube isn't allowed us to change their code to a smaller version, so here's another way that you can use and a much better petite music player. 

Copy this code below.
#music {
text-align: center;
font-size: 13px;
position:fixed;
left:20px;
top:-55px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;z-index:999;
} 
#music:hover {
top:-10px; 
}
#song {
background:#48cccd;
padding: 20px 0 5px 0;
border:1px solid #eee;
border-radius:8px;
z-index: 9999;
position:fixed;
font-family:Tahoma;
font-size:8px;
-webkit-transition:1s;
}
Below the #entry { . . . . . . . . . . . .  }
e.g:

#entry {
font-family: georgia;
font-size: 9pt;
position: absolute;
top: 300px;
left: 370px;
width: 700px;
padding: 0 10px 0 10px;
background-color: #ffffff;
}

#music {
text-align: center;
font-size: 13px;
position:fixed;
left:20px;
top:-55px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;z-index:999;
} 
#music:hover {
top:-10px; 
}
#song {
background: #48cccd;
padding: 20px 0 5px 0;
border:1px solid #eee;
border-radius:8px;
z-index: 9999;
position:fixed;
font-family:Tahoma;
font-size:8px;
-webkit-transition:1s;
}
It doesn't mean that ur code is #entry it maybe #post or any other thing. Just make sure to paste it below the #(anything)

 Change the bold code into any color code you like.

 Next, copy this code below.

div id="music"> 
<div id="song"><center><div style="float:right; margin-right:5px;"> Tokens? </div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="15" height="25"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://media.irondj.net/mix/file/30821/Primadonna_Girl_-_Marina_and_the_Diamonds__Lyrics__HD-_www_flvto_com_.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://media.irondj.net/mix/file/30821/Primadonna_Girl_-_Marina_and_the_Diamonds__Lyrics__HD-_www_flvto_com_.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="15" height="25" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><div id="player"><br>♫ ♬♫ ♬</div> </center></div> 
</script>
<div></div>
<script type="text/javascript"> 
$('body').hide();
$('body').fadeIn(2000);
</script>
</div> 

Paste this code below </head> Now, time to change ur song choice :D

 Go to this website.  Then, search for you song choice in the search bar.



Click on the song that you want. Then, slide down a bit till you find html embed column. On the small box contain the code, scroll on it till you find

Click on the down arrow once,


Now copy the code starting after file/. . . . 
for example 

 http://media.irondj.net/mix/file/31876/Taylor_Swift_-_I_Knew_You_Were_Trouble_Lyrics.mp3

Only copy the one that I've bold it. ONLY!

 Then, go back to the template. Replace the bold code with the one that you've copied.

<div id="music"> 
<div id="song"><center><div style="float:right; margin-right:5px;"> Tokens? </div><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="15" height="25"><PARAM NAME=movie VALUE="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://media.irondj.net/mix/file/30821/Primadonna_Girl_-_Marina_and_the_Diamonds__Lyrics__HD-_www_flvto_com_.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause"><PARAM NAME=quality VALUE=high><PARAM NAME=wmode VALUE=transparent><embed src="http://www.strangecube.com/audioplay/online/audioplay.swf?file=http://media.irondj.net/mix/file/30821/Primadonna_Girl_-_Marina_and_the_Diamonds__Lyrics__HD-_www_flvto_com_.mp3&auto=yes&sendstop=yes&repeat=0&buttondir=http://www.strangecube.com/audioplay/online/alpha_buttons/negative_small&bgcolor=0xffffff&mode=playpause" quality=high wmode=transparent width="15" height="25" align="" TYPE="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><div id="player"><br>♫ ♬♫ ♬</div> </center></div> 
</script>
<div></div>
<script type="text/javascript"> 
$('body').hide();
$('body').fadeIn(2000);
</script>
</div> 

 And tadaaaa u're done :) Well truthfully, there's quite a lot of step but believe me you'll be satisfied. Toodles~ 

Labels: