Home Owner Affies Stuffs Themes


June 15, 2014

Hide Floating Music Player #1





Hai semuanya..............:D :D Malam ini Nyimas mau share cara buat hide floating music player yang di req oleh Savitri dan Fida. Floating music player ini sama seperti punya Nyimas. Kalau nggak tau liat previewnya :

Example
  • Log In Blogger.
  • Pergi ke Template->Cari kode </style>
  • Copy code dibawah ini :
#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 #f0d0d0;
    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 #f0d0d0;
    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;
}
  • Bold : posisi music player. Tapi sebaiknya gak usah diubah ya >_<
  • Italic : border kotak music player
  • Underline : Background kotak music player, tapi itu biarin aja, diganti juga boleh.
  • Sekarang, cari lagi kode </style>
  • Copy code dibawah :
<div id="editthis">
<div id="music1">
<div id="music2">
<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. -->
<img src="http://media.tumblr.com/tumblr_m7w1rmdJ1p1r6o8v2.gif"></div>
<div id="music3">
<Div style="margin-top:4px;">
<!-- YOUR MUSIC CODE GOES HERE, RIGHT AFTER THIS LINE. -->
Kode Musikmu</div>
</div>
</div>
</div>

  • Violet : Music Gif.
  • Blue : Kode musik. Bisa pakai flash mp3 player, billy, maupun youtube music player :)
  • Music gif bisa pilih dibawah ini :

     
        
  • Preview and Save. Done!!

Gimana??? Jadi kan,??
Credit to Kak Atin
Music gif credit : kawaiilayouts
GOOD LUCK!!


Thanks For Reading..... Leave Your Comments ^_^



No comments:

Post a Comment

Just Comment Here! I'm not a Wolf...