Salsa's Tutobies Blog // Vacuum
HOME ABOUT RANDOMS TUTORIAL FREEBIES FRIENDS RULES SKINS OLSHOP












Sunday, 15 June 2014 - 1 People[s]

      Tutorial floating mp3 player ini direquest oleh temen blogger bernama Fida:) Klik disini untuk melihat floating mp3 player versi pertama. Dan tutorial ini cuma bisa buat template classic/blogskins. Preview :
 
setelah dihover...
  • Log in blogger > Template
  • Tekan ctrl + F di keyboard lalu cari kode </style>
  • Copy lalu pastekan kode ini tepat diatas kode </style> tadi
#editthis{
    /* EDIT THIS STUFF TO POSITION YOUR MUSIC PLAYER */
    position:fixed;
    top:10px; /* YOU CAN CHANGE THIS TO BOTTOM */
    left:20px; /* YOU CAN CHANGE THIS TO RIGHT */
    z-index:99;}

/* I DON'T RECOMMEND TOUCHING THIS STUFF */
#music1{
    position:fixed;
    padding:2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;}

#music1:hover #music2{
    opacity:0;
    margin-top:-25px;
    z-index:-1;}

#music1:hover #music3{
    opacity:1;
    margin-top:-5px;
    z-index:99;}

#music1:hover #musiclist{
    opacity:1;}

#music2{
    /* THIS IS THE GIF DIV */
    opacity:1;
    background-color:#fff;
    border:1px dashed #e4e4e4;
    padding:6px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;}

#music3{
    /* THIS IS THE ACTUAL MUSIC PLAYER DIV */
    opacity:0;
    position:fixed;
    background-color:#fff;
    border:1px dashed #e4e4e4;
    width:60px;
    height:26px;
    z-index:99;
    margin-left:-5px;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
}
  • Kemudian, cari lagi kode </head>
  • Copy lalu pastekan kode ini tepat diatas kode </head> tadi
<div id="editthis">
<div id="music1">
<div id="music2">

<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. -->
<img src="Url Icon Music"></div>

<div id="music3">
<Div style="margin-top:4px;">
<!-- YOUR MUSIC CODE GOES HERE, RIGHT AFTER THIS LINE. -->
<embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&f0=Url Mp3&t0=Anugerah Salsa&total=1" quality="high" wmode="transparent" width="200" height="10" name="billy" align="middle" type="application/x-shockwave-flash" /></div>
</div>
</div>
</div>
Adjust code
  Merah : gantikan dengan Url icon music kesukaanmu.
 http://sl.glitter-graphics.net/pub/439/439087zf2mcug0by.gif
 http://dl5.glitter-graphics.net/pub/220/220645u9r9sjvsfp.gif
  http://dl.glitter-graphics.net/pub/695/695351ug3twpiwlh.gif
  http://dl2.glitter-graphics.net/pub/122/122842r9l2jjtjaf.gif
  Biru : gantikan dengan url mp3 yang kamu suka.

  • Jika sudah, silahkan disave dan sudah selesai!






Blogger AR16 said...

Makasih kak ><

 

Post a Comment

for your info
about

[Ordinary girl with extraorninary idea]
Hello ! My name is Anugerah Mullia Ulfa Salsabella. You can call me Salsa. Born at 2000 line. Live in Bekasi, West Java. Proud to be part of swiftie and directioner.

Do follow me
Besties

hide and seek
Secret box

1 2 3 4
This is Navigate around. Please read this :
1 = Ask.fm box
2 = My sites
3 = Blog stats
4= Search box

shout what ever
tagboard

I'm sorry, but the chatbox is not available now because I'm in HIATUS mode. You can contact me on facebook or twitter^-^

related post
archives

Big claps for them
credits

© 2013 - Full Template by Salsa. Somebody help me is Gh R A Y. I took many part of this blog by many skins, so big thanks to blogskins.com, espesially to Uhbmy and there's no basecode. Best viewed is in Google Chrome (Recommended). Don't ever dare to open my page source and copy any content from this site!