Tutorial : Hide Music Player Ver 5 (Blogskin)


Assalamualaikum and annyeonghaseyo. Actually, tutor ni ramai yang tanya tieqa sebelum ni. Tapi cuma tieqa je yang malas nak buat. LOL. Gurau je. Sekarang ni tieqa 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

5 comment [s]:

Secret Garden said...

untuk bukan blogskins ada x? akak, kenapa yg irondj.net x boleh on?

SITI said...

nice tuto :)

Malihah Munirah said...

Tenkiu .

Anonymous said...

thanks.

cikin said...

thanks for sharing the knowledge