[Tutorial] Sorokkan Shoutbox

Salam...you alls.

Hari nie nak buat tutorial sorokkan shoutbox kat bahagian tepi blog korang tu supaya dapat jimat ruang blog..hehehe. Shoutbox pun dah pandai main sorok-sorok tau. hehehe. Bila korang tekan gambar shoutbox tu baru dia muncul..

okey...

1. Log in tu Blogger..kalau tak macam mana nak sorok cik shoutbox tu kan..

2. Go to DESIGN > ADD A GADGET > HTML/JAVASCRIPT

3. tajuk biarkan kosong ya kawan-kawan

4. Copy code di bawah dan paste kat ruangan kosong tu..

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:180px;
width:71px;
float:left;
cursor:pointer;
background:url('URL GAMBAR SHOUTBOX') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #ffffff;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 41-w) : moveGB(41-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">
KOD SHOUTBOX / CBOX KORANG DISINI
<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 = (41-gb.offsetWidth).toString() + "px";
</script>

* ayat warna BIRU - URL gambar shoutbox tu maknanya gambar kat tepi shoutbox tu. URL korang boleh ambil kat bawah. Mira design khas untuk korang. Sorry la kalau tak segempak mana..

* ayat warna MERAH - letak code shoutbox korang kat situ.

* ayat warna HIJAU - korang boleh tukar height dengan width mengikut height n width gambar shoutbox korang. Kalau tak, nanti gambar macam kena potong

GAMBAR SHOUTBOX: Ambil la...jangan malu jangan segan. Mira buat khas untuk korang

http://i301.photobucket.com/albums/nn46/cuttysakura93/domo.png

Height - 145px

Width - 71px

http://i301.photobucket.com/albums/nn46/cuttysakura93/Untitled-2-1.png

Height - 182px

width - 49px

http://i301.photobucket.com/albums/nn46/cuttysakura93/vector2.png

Height - 191px

width - 85px

5. Bila dah siap ubah itu ini.. tekan SAVE..dah siap...yeay!!!

Kalau ada masalah, comment tau. Kalau dah buat tutorial nie pun comment tau. Boleh mira tengok hasilnya.

**UPDATE!!!

kalau gambar shoutbox tu separuh,

tengok balik coding tu... cari code macam di atas.. Cuba tukar nombor tu. pastu review.. Kalau separuh lagi, tukar lagi.. sampai korang puas hati dan senang hati..

Selamat mencuba

semoga berjaya..

Sayonara...