Cara Sorok Shoutbox.

Saturday, December 04, 2010

Assalamualaikum..

ramai gak tanye camne nak sorokkan shoutbox ni..
senang je..same macam kite nak pasang widget lain kat blog..
1. copy code kat bawah ni ye..
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXw3JHOP-aqyK5zRuevAOR4gj3-Bn8-2Lalmyhl53A1g4o8DlayPr8vysOYGDYZoyCPMj2S8h1w5H3M6kLLNHygfVIm8bBeV9wjxncLUND55J3TMOOOGo44ZHh83uHgSQa9rJU9_kG6kJO/s320/tabs.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, 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">

MASUKKAN CODE SHOUTBOX KORANG KAT SINI

<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 = (30-gb.offsetWidth).toString() + "px";
</script>
2. pegi ke design > page element > add a gadget > HTML/javaScript, then paste kan code tadi.

3. Tukarkan yang kaler biru tu dengan code shoutbox korang oke. 50px tu untuk kedudukan shoutbox, lagi tinggi nombor yang disetkan, makin ke bawah shoutbox korang tu nanti, oke?

4. save, save lagi kat bahagian atas, then view blog.

sudah siap..

selamat mencuba uols..

~wassalam~
pst : tutorial ni untuk yang tak tahu oke..
pada yang tahu dan pakar..diam..diam..
kredit untuk liyana.

You Might Also Like

20 Comments

  1. thanks mia ..akhirnya boleh juger sembunyikkan chat box saya..

    ReplyDelete
  2. thanks miaa..
    mmg tercari2 cmne nak wat ni
    hehehe

    ReplyDelete
  3. @gaung

    welkam..nnti try tau..ehehee

    ReplyDelete
  4. @Anisa Hang Tuah

    hehee..nis da buat nti, mia nk tgk..cpt3..ekhekhekee

    ReplyDelete
  5. thanks mia, hehe dah berjaye :D thank u soo mucho dear!

    ReplyDelete
  6. @Cik Sehari Anti Kanta Lekap

    hehe..welkam..da buat ekk..oke jap nk tgk..ehehe

    ReplyDelete
  7. thanks mia.. (ntah nape thanks)

    ReplyDelete
  8. @hamzah ian

    welkam majah..grr..nk perli la tu..akehkehkee

    ReplyDelete
  9. tq3 da lama tora cri tutorial ni hehe ari ni jpe gak =)

    ReplyDelete
  10. @MiSs TOrA

    hehehe..welkam dear..da buat nnti bgtau ek

    ReplyDelete
  11. kak mia thanks for info hehe :) btw nak bagi suggestion tuk kak mia. tue pon kalau kak mia suke la hehe. kite nak suggest yang comment kak mia guna pop-up punya. lagi mudah if lya and orang lain nak comment hehe :)

    muah! <3

    ReplyDelete
  12. tq untuk ini budak kecik ;p

    ReplyDelete
  13. tq untuk ini budak kecik ;p

    ReplyDelete
  14. @alia shahira

    ehhehe..yeah dear..akk da buat pop up da..oke x?tq tau

    ReplyDelete
  15. @sharaBUNGA

    budak kecik?khekehke..welkam dear

    ReplyDelete
  16. Waah.. akhir nya tahu jugak bagaimana cara nya.. thanks! ;)

    ReplyDelete
  17. @Wan Fakhrul Rin

    welkam yaa..ehhehe..nk tgk laa da berjaya buat ea

    ReplyDelete
  18. tq!! saya baru buat blog..sudi2 lah bagi semangat ea..hehe

    ReplyDelete
  19. @Pa'An

    welkam..huwa, happy blogging ya :)

    ReplyDelete

SHARE LINK ANDA DI SINI

<a href="URL LINK BLOG U OLS"> NAMA BLOG U OLS</a>

thanks for dropping by...
^__^