Tutorial : Hide Music Player Part 5 (Blogskin)

:Contoh:
1. Dashboard > Template 2. Press F3 dan cari code </style> 3. Copy code bawah ni

#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:2px solid #000;
    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:2px solid #000;
    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;}

4. Paste di atas code </style> tadi 5. Sekarang , copy code bawah ni pulak

<div id="editthis"> <div id="music1"> <div id="music2">
<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. --> <img src="URLIMG"></div>
<div id="music3"> <Div style="margin-top:4px;"> <!-- YOUR MUSIC CODE GOES HERE, RIGHT AFTER THIS LINE. --> URL MP3</div> </div> </div> </div> </head> <br>

6. Paste di bawah code </style> 7. Preview dan save .

Hijau : ketebalan border

Oren : solid / dotted / dashed

Purple : warna border

Pink : URL image/gif

Merah : URL mp3

Credit to : AtiQah