Huxsna


"...Follow me on Instagram @huxsna..."


Monday, 4 May 2015 - 0 Complain

Assalamualaikum.. Music Player Is Hiding? haha.. Main main je.. Music Player ni versi dye Hiding ! apa lahh! xD 

 >>


Tutorial ni untuk Blogskin je, but.. kalau siapa guna Template Designer,Simple and lain lain kalau tak jadi, jangan marah Husna, Kalau Jadi Alhamdulillah.. sebab husna search kat google tak dapat.. semua husna tak faham.. hehe ^^

Template Designer,Simple etc
  • Dashboard > Layout > Add a Gadget > Html/JavaScript
  • Copy code bawah ni and pastekan di dalam Html tersebut..
 <style> #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;
}

<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>
</style>


Classic Template

  • Dashboard > Template
  • Ctrl+f serentak search code </style>
  • Copy code bawah ni and pastekan atas code </style>
#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;
}


  • Dah? Good ^^
  • Sekarang copy code bawah ni and pastekan di bawah code </style>
<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>
</style>


  • Preview and save
Merah : Url Icon
Biru : Url MP3

FREEBIES



















Post a Comment

Ada masalah? Ada benda yang hendak dipuji? Suka dengan blog nie? Complain lah apa lagi!


Hello From The Otherside!

click this button ^^

de' little map

cbox

Fairytales Time Machine

credit