Tuesday, December 20, 2011 | 11:47 PM | 0 bias


Assalamualaikum guyss.Hari ni aku nak buat tuto yang pasal Music Player yang aku guna untuk skin dulu. Tutorial ni untuk Alis.Yang macam ni;


Klik ahh gambar tu kalau tak faham atau tak nampak lagi.Ekceli tu aku amik code untuk hide shoutbox.Tapi boleh jee kalau rase nak letak benda lain.Ni codenye. Ctrl+C untuk copy.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('URL IMAGE') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;background:#F5F5F5;padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
CODE MUSIC PLAYER
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Merah -url gambar yang kat luar tu.Letak lahh gambar apa pun tapi kadang2 kalau gambar tu besar,dia jadi nampak gambar tu separuh jee.Harap Maklum.

Hijau - Awak pandai2 lah adjust sendiri bahagian tu.Nak tukar warna ke,ketebalan border ke.Ikut suka ahh.

Biru -Cuma tukarkan warna background.

Oren -Yang ni penting.Pastikan code music player tu betul sebab kalau tersalah nanti dah tak nampak kat mana salahnya.Yelah code tu banyak,nanti pening.Sebaiknya guna music player yang Autoplay .

Ni kalau nak icon untuk kat luar tu.

http://i1103.photobucket.com/albums/g464/nsyiqin97/music2.png

http://i1103.photobucket.com/albums/g464/nsyiqin97/music22.png

http://i1103.photobucket.com/albums/g464/nsyiqin97/music21.png

http://i1103.photobucket.com/albums/g464/nsyiqin97/music23.png

Okayy done! Tu jee and lagi satu nak tanye,ade sesiapa nak tak skin yang kat atas yang warna oren tu.Sebab aku tak tahu nak contribute kat blogskin ke tak.Kalau ada yang nak bagitahu ekk xD

Labels: tutorial