Home About Stuff Link My BIAS

Monday 29 October 2012

Tutorial : Hide Music Player Ver II (Blogskin)



Assalamualaikum and annyeonghaseyo. Actually, tutor ni ramai yang tanya rienna sebelum ni. Tapi cuma rienna je yang malas nak buat. LOL. Gurau je. Sekarang ni rienna nak tunjukkan cara utk buat hide music player versi yang ke-5. Nak cuba tak? Jom!


:: PREVIEW ::

1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Copy code di 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 tadi
5. Next, cari code </style> juga
6. Copy code di bawah ni
<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>
7. Paste di bawah code yang korg cari tadi
8. Preview & save

Hijau : ketebalan border
Oren : solid / dotted / dashed
Purple : warna border
Pink : URL image/gif
Merah : URL mp3

0 comments:

Related Posts Plugin for WordPress, Blogger...