Official Tutobies Blog by Aimi Rahim

ENTRY ABOUT LINKS TUTO F'BOOK TWITTER BLOG +1 NEWER OLDER +FOLLOW

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

0 Comment[s] |