TUTORIAL : FLOAT SHOUTBOX

Assalamualaikum...

Selamat petang kepada semua! hmmm..Korang perasan x shoutbox aku kat tepi tu?? perasan x?? HAHA. soalan poyo. mestilah perasan kalau da gambar kau besar gedabak Syed oi! Kalau perasan baguslah. hahaha. Actually, aku nak buat tutorial pasal tu lah ni... bukan ape..aku nak buat ni pun sebab almost everyday keyword 'Shoutbox' masuk dalam blog aku... ni mesti sbb post aku yg sebelum ni ade cite pasal jenis2 shoutbox. adoi3..Oleh itu, daripada diorang terus hampa..aku da sediakan tutorial ni utk diorang... jom tgk!

1. Mula-mula pergi ke Dashboard>Page Element>Add Gadget>HTML/JAVASCRIPT

2. Then, copy code di bawah ye..

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:400px;

width:150px;

float:left;

cursor:pointer;

background:url('http://s2.kimag.es/share/48678709.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(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">

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

</script>

• Warna hijau tu untuk width dan height korang punya gambar...

• Warna Aqua pulak untuk gambar korang.. letak URL gambar korang nak dkat situ

• Warna kuning ni memang penting gilaa.. Korang kena pandai ubah sendiri . sama ada naikkan value dia atau turunkan.. depends laa. kalau gambar ko tersorok kat tepi tu.. pandai2 la naikkan yang mana2 nombor.. try and error k! . practice make perfect! aku pun byk kali try and error baru laa dpat yg betul2 fix dkat tepi tu

Ni aku ade buat beberapa image yang x seberapa. kalo nak guna tu boleh laaa...kalau x nak pun tengok2 je la okay? XD

http://s2.kimag.es/share/22194286.png

http://s2.kimag.es/share/23318198.png

http://s2.kimag.es/share/40692203.png

• Tu je la gambar simple gilaa yang aku dpat buat.. nak lebih2 bayar RM5 ok! wakaka. cesss ko syed.. korang try sendiri la. kalau ade pape yang musykil tanya aku. nanti aku jawab ok? babai! ..n gud luck , Assalam