yO! Assalammualaikum semUa bloGGerz and sTalkers~ tQ for visit mY blOg...plEasE eNjoy reading tHis bloG yA! ^__^

Pages

.:: Penilik bLog ::.

Sign by Danasoft - Get Your Sign

.:: tuTorIal shoUtboX yg TergantuNg ::.

yO! Assalammualikum dan salam singgah dekat semua bloggerz yg sudi menjenggok bLog aku nie~
Okey hari nak buat entry tutorial laa plak...tutor aku pada kali ialah cara nak buat shoutbox korang tergantung macam aku punyer nie...tekan jea terus keluar! ~kan senang~=))


kLik bagi pEmbesaran imaGe~!!




First, korang kena laa baca entry aku nie sampai habis...WAJIB BACA!! kalau nak buat flout shoutbox mcm aku nie...=.=' 


jOm kita belajar bUat nie....zAzzsss!---->


1. Dashboard-Design-Page Element-Add Gadget-HTML/JAVASCRIPT.
2. Copy code kat bawah ni dan paste kat HTML JAVASCRIPT tu.
* Jangan lupa letak code shoutbox atau cbox korang.




<style type="text/css">

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

.gbtab{
height:400px;
width:60px;
float:left;
cursor:pointer;
background:url('http://img574.imageshack.us/img574/3243/14065584.png') 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, 150-w) : moveGB(40-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">

MASUKKAN KOD SHOUTBOX ANDA DISINI

<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 = (60-gb.offsetWidth).toString() + "px";
</script>


Select dan CTRL + C untuk copy kod diatas.


  • Yang warna purple tu width and height utk gambar.

  • Yang warna oren tu url gamba yang korang nak.

  • Yang warna merah tu , kalau kau kena adjust sikit. Sebab kengkadang gambar tu boleh tersorok dan dia kadang2 tak tunjuk sepenuhnya gambar tu. Dan kengkadang dia tutup pun tak habis. Kalau kau guna code ni dan ok, takde masalah, tak payah gatal tangan ubah code tu. Kalau tak tau, bgtau aku tau.

Korang boleh buat sendiri gak gambar tu. Guna photoshop je.

0 org Budak kecik dtg mai komEn sini ^__^:

Post a Comment

Followers

Jemput tengok mana2 berkenan

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...