Tuesday, January 8, 2013

Tutorial : Hide Music Player #1


안녕하세요 , こんにちは . Assalamualaikum. Atin punye blogskin yang ari tu ada taruk music player yang atas tu kan? sorry Atin tak buat tutonye lagi hihi Jadi Atin buat hari selagi Atin ada masa ni haha ..

  -->   

1. Dashboard > Template
2. Tekan 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;
}
oren : tebal border
hijau : jenis border
merah : color border

4. Paste di atas 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="URLICON"></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>
pink : URL icon music
biru : URL mp3


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



INI ICON MUSIC




2 comments:

Annisa said...

Akak , saya izin copy tutorial boleh tak ?

Atin Tory said...

@Annisa : boleh.. silakan :)