Welcome
You can put anything here as well!
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:
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)#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;}
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 down arrow once,
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: blogskin
Add Object
Monday, December 31, 2012 @ 5:07 AM
0 Comment(s)
Assalamualaikum.
Today Mira nak ajar macam mana nak Add Object dekat blogskin. What i mean by object is macam gambar, youtube player and so on.
Lets begin! |Youtube Player|
Firstly korang pergi lah log in Blogger > Template. Macam biasa lah kan. Then cari code <body> Copy code dekat bawah ni and paste it under the code <body>
Lets begin! |Youtube Player|
Firstly korang pergi lah log in Blogger > Template. Macam biasa lah kan. Then cari code <body> Copy code dekat bawah ni and paste it under the code <body>
<div style="position: fixed; top:490px; left: 930px; bottom: 30px; z-index:2;filter:alpha(opacity=85); background-color:transparent;"><object width="200" height="25"><param name="movie" value="http://www.youtube.com/v/noLrCDzAp5M?fs=1&autoplay=1&hl=en_US&color1=0xD462FF&color2=0xD462FF" /><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/noLrCDzAp5M?fs=1&autoplay=1&hl=en_US&color1=0xD462FF&color2=0xD462FF" type="application/x-shockwave-flash" width="200" height="25" allowscriptaccess="always" allowfullscreen="true"></embed></object></div>
This is the code. Korang boleh edit code ni dengan cara yg korang nak lah kan.
Blue - The object position. fixed (the object position won't change at all)or absolute (the object position will follow as u scroll downwards or upwards)
Purple - The object position on the blog. Just change the numbers.
Green - Size of youtube player.
Pink - Youtube player code. Just change the music code.
Replace the pink code with the blue highlight code.
Orange - Color of youtube video. Just change the html color code. Google it.
Thats All~
Labels: blogskin
