6 Orang Jiran Sebelah Sibuk

Tutorial: Hidden Music Player, Click to Show


assalamualaikum semua
tak jawab berdosa, kalau jawab sayang

faham tak dengan grafik yang ieka buat ni? senang kata, tengoklah dekat tepi blog ieka ni. try klik tengok. ada keluar music player kan. nak juga ke? mari ieka ajarkan.

1. pergi ke page element >> add widget >> HTML/Javascript
2. pastekan code yang ieka bagi ni.

<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:140px;
float:left;
cursor:pointer;
background:url('URL ICON MUZIK') no-repeat;

}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">

<center><br /> TAJUK LAGU <br />
- NAMA PENYANYI - <br/>
<object width="300" height="25"><param name="movie" value="http://www.youtube.com/v/sZIm9oJA0KY?fs=1&amp;autoplay=1&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " /><param name="allowFullScreen" value="false" /><param name="allowscriptaccess" value="never" /><embed src="http://www.youtube.com/v/sZIm9oJA0KY?fs=1&amp;autoplay=1&amp;hl=en_US&amp;rel=0&amp;color1=ffffff&amp;amp;color2=ffffff " type="application/x-shockwave-flash" width="300" height="25"></embed></object>
</center>
<center> NOTES </center>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>

  • warna MERAH - boleh buang kalau tak nak
  • warna BIRU - gantikan dengan code video yang anda nak. boleh didapati di hujung URL video anda
  • warna PINK - boleh diubah mengikut kesesuaian
Cara nak Cari CODE video

tak kisahlah macam mana pun URL tu, code videonya ada di tempat yang sama. ieka bagi contoh sikit.

http://www.youtube.com/watch?v=mNbAEdeU7i0&feature=g-vrec&context=G2919a22RVAAAAAAAABw 
http://youtu.be/mNbAEdeU7i0
http://www.youtube.com/watch?v=mNbAEdeU7i0

so, perasan tak apa yang sama dengan semua link neyh? senang cakap, code video itu adalah urutan huruf dan nombor yang tak sekata pertama yang korang jumpa dalam URL. kalau ada simbol, maknanya bukan.

ieka harap korang suka dengan tutorial ini. jadi ke tak? bagitahu ye.