Tuesday, 3 December 2013

Hide music player 3

4 Comment(s) so far


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%

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tnjWxmclvbg337vh9N8TncDYpjsHuytRpA_b0-7NotOd9m5H8XzCV1gWvv2_8mAw1_dJLjj4rQIcseWIz73Kb66Uh__5JVeeeq4-lhVA5mMphF3fQkFg23urpGYduOQM_pdg_mZ3sPdR/s1600/kawaiilady.b.com.png


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
Fuchsia text : Music player code use billy player find music 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&amp;f0=http://a.tumblr.com/tumblr_lwve08PUhx1qdjl89o1.mp3&amp;t0=&amp;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...