Assalamualaikum and hello everyone ! we meet again in my new tutorial post...this is my third hide music player tutorial...ask for my permission first if you want to copy this tutorial...I got this tutor from tumblr if I'm not mistaken the URL is tumblings.net ( I'm not sure ) but, I have edit the code almost 70%
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 type="text/css">
#music-player-rounded {
position:fixed;
left:30px;
top:5px;
width:25px;
height:25px;
padding-left:10px;
padding-top:10px;
background-color:#FFFFFF;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
border:3px dotted pink;
opacity:1;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#music-player-rounded:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform: rotate(360deg);
left:50px;
top:30px;
}
.music-player {
margin-top:-10px;
margin-left:-55px;
width:25px;
height:25px;
padding-left:10px;
padding-top:10px;
background-color:#FFFFFF;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
border:2px solid #dddddd;
color:#777777;
opacity:0;
overflow:hidden;
font:12px Arial, Calibri, Cambria, sans-serif;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#music-player-rounded:hover .music-player {
opacity:1;
}
.music-player-embed {
margin-left:-115px;
margin-top:3px;
}
</style>
<div id="music-player-rounded">
<img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif" />
<br />
<div class="music-player">
<div class="music-player-embed">
MUSIC CODE HERE
</div></div></div>
The notes :
Red text : Color code
HERE
Orange text : Width and height of the music player before and after hover
Blue text : Music icon URL can be find
HERE
Alert this :
1. Don't put title on your music player
2. Change the width of the player from 200 to 370
example :
<embed align="middle" height="10" name="billy" quality="high" src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=http://a.tumblr.com/tumblr_lwve08PUhx1qdjl89o1.mp3&t0=&total=1" type="application/x-shockwave-flash" width="370" wmode="transparent"></embed></div>
Ok thats all...Kalau tak faham tanyalah...see you again in my next post..btw, I don't take banner request anymore... PLEASE COMMENT AND RATE
THIS SKIN... \(u,u\) thanks...