Saturday, January 19, 2013

Tutorial : Hide Music Player #2

Tumblr_mf2vesflcq1qfqm2lo1_500_large

안녕하세요 , こんにちは . Assalamualaikum. Atin nak ajar korang hide music . Untuk kali ni lain kot huhu.. Kalau tuto ni boleh guna untuk music jenis billy style je. Ok lah jom buat hihi.. Contoh bawah ni..siap adalist song lagi..dia lebih kurang macam tuto yang bertama


1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni


<style>
#editthis{
    /* EDIT THIS STUFF TO POSITION YOUR MUSIC PLAYER */
    position:fixed;
    top:20px; /* 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 dotted #ccc;
    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 #ccc;
    width:55px;
    height:20px;
    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;}
   
#musiclist{
    /* THIS IS THE PLAYLIST DIV */
    opacity:0;
    position:fixed;
    padding:6px;
    border:1px dashed #ccc;
    margin-left:10px;
    margin-top:10px;
    font-family:consolas;
    font-size:8px;
    background-color:#fff;
    width:120px;
    color:#999;
    text-transform:uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}
   
#musiclist h1{
    /*THIS IS THE PLAYLIST TITLE SETTINGS*/
    font-family:consolas;
    font-size:11px;
    margin-top:0px;
    margin-bottom:2px;
    font-style:normal;
    font-weight:normal;
    color:#1bbafc; /*THIS IS THE PLAYLIST TITLE COLOR*/
    border-bottom:1px dotted #ccc;
    text-align:left;
    text-transform:uppercase;}
</style>

merah : color border
kuning : color title playlist

4. Paste bawah code </style>
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="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"></div>
<div id="music3">
<Div style="margin-top:4px;">
PUT CODE MUSIC HERE
 
</div>
</div>
<div id="musiclist">
<h1>Playlist</h1>
<!-- PUT YOUR MUSIC TITLES HERE. . -->
01. Song1 <br>
02. Song2 <br>
03. Song3 <br>
</div>
</div>
</div>
biru : icon music
hijau : title list
oren : title lagu

7. Paste di bawah code </style>
8. Preview & save


3 comments:

Nur Zalikha Masri said...

Thank You! Cantik

Nurul Anisah said...

Thanks for the tutorial :)

Afiys Aseee said...

akak, kenapa lagu adik tak kluar erkk?