Tutorial : Shoutbox auto-hide

As-salam..

Dah ramai yang request camne nak buat shoutbox auto hide ataupun yang boleh menyorok kat tepi tu. Hari ni aku tunjukkan caranya.

Mula-mula korang kena la buat shoutbox dulu. Kalau yang dah ada, tak pela. Dapatkan kod shoutbox dulu, lepas tu buka Design - Add a Gadget - HTML/javascript - tambah kod kat bawah ni.

<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('http://img411.imageshack.us/img411/6496/hijau.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">
KOD SHOUTBOX ANDA DI 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>


Masukkan kod shoutbox u all kat KOD SHOUTBOX DI SINI.
Nampak tak kod yang bertulisan hijau tu kotak shoutbox yang akan kuar kat tepi ni. Paham tak ni? -_-'
Kalau u all nak design sendiri, boleh la tukar kod tulisan hijau tu.

credit code ni to sis Intan.




Kalau berkenan nak gunakan yang ni pun boleh ambik.  Khas untuk u all yang selalu mengikuti dunia emieysandra. Mood penghargaan jiwang ni tak abis ag..huhu ;)
 



http://i830.photobucket.com/albums/zz229/emieysandra/shoutbox-4.png

Ambik kod tu, then gantikan kat kod tulisan hijau tu. Tapi kena edit height kat atas tu, tukar kepada 200 yer.

p/s : selamat mencuba! ;P


54 comments:

Amirah Su'aidah said...

boleh amik ke gambar 2?? risau nie..

ciknabil-a said...

menarik nie.. t nak try. :)

♥-- emieysandra --♥ said...

@ Amirah Su'aidah
:- betol, ambik la, ikhlas nie ;)

@ Ciknabil-a
:- try la ;)

♥KellY Eun♥ said...

emi,,,thnks 4 da tuto,,,nak buat lpas neyh,,thks so much dear,,

FATIN LIYANA♥ said...

Salam . thankss ! sy dah buat dahh !
thanks again !!
:)

hve a look ye !

http://mytokcallmekakngah.blogspot.com

maCy said...

macy da pna wat. pas tuka template macy wt bse blk. sbb ruang byk. huhu

Hanis said...

tq 4 tutorial ! :) saya amik muleyy ? btw thnz ! :)

AiDa AzRyN said...

whoa... best ni.. nanti aida nak try la.. :)

♥-- emieysandra --♥ said...

@ ♥KellY Eun♥
:- Kelly!..ehehe, wt la

@ FATIN LIYANA♥
:- wassalam, dh pi tgk..pndai2 ;)

@ Macy
:- klu trase nk wat, mai tgk la..

@ Hanis
:- ambik la klu sudi ;)

@ Aida AzRyN
:- try la dear ;)

Gayahspears said...

terima kasih cikgu..huhu

cik hani said...

nnt nk try wat

nik rosmawati said...

nak kena try buat ni :)

Wan Gerrard said...

nak try la nanti..blog nak kena upgrade sikit =P

Aisyah AR said...

wah!! nice share yank!!! barulah reti buat!! huhuhu....

babyHoney said...

tengs .
da ciap .
nnty la edit bg cun !

Avatar said...

:( ta jdi la akak..
T-T

2+2=5 said...

sonok sonok suke suke...hehehheeh sy try yer...trima ksih =)

nurul dottie said...

, kak . kalao nak pakai gamba sendiri cam ner pulak ?

♥-- emieysandra --♥ said...

kalau nk pkai gmbar sndiri..juz edit, dptkn direct link gmbar tu..guna photobucket ;)

nurul dottie said...

, oke .saya try .

pelangi_aien said...

aslm . akak . saye nak minx tolonk bule ta?saye da buadd shoutbox tpi tade tmpt untuk chat .juz tlis close aje. so cmne ? akk nak edited shoutbox cmne n katmne ? soie kak .saye bru blaja lah .

pelangi_aien said...

aslm . akak . saye nak minx tolonk bule ta?saye da buadd shoutbox tpi tade tmpt untuk chat .juz tlis close aje. so cmne ? akk nak edited shoutbox cmne n katmne ? soie kak .saye bru blaja lah .

nurul farahin samsuri :) said...

aslm . akak . saye nak minx tolonk bule ta?saye da buadd shoutbox tpi tade tmpt untuk chat .juz tlis close aje. so cmne ? akk nak edited shoutbox cmne n katmne ? soie kak .saye bru blaja lah .

Shida Shacha said...

kak , dh try buat dh . tpy mcm ne na buat yg ade gamba and text shoutbox tuh yaa ?

♥-- emieysandra --♥ said...

boleh tengok tutorial buat shoutbox kat sini
buat shoutbox

allyza abdullah said...

huhu thanks. kite amik code tu gak. thx again huhu

Shida Shacha said...

dh dapat buat dh . tengs kak emiey . sy amek code akak tw :)

Akihiro said...

cmne nk buat ni..tulum..tulum..

makcek bukan nenek said...

emiey !
i amek code shoutbox tuh .
pinjam jap .
asik buat x jadi jek . sobs
terima kaseh x terhingga!

~MiKaPaRaDiSe~ said...

adoi...nape sy xdpt2 nk tukar kink pic nih??? asyik2 jpg jer...cm ner nk tuka ke png nih...dah buat semua dah...tp xdpt2 la...terpaksa coy shoutbox u...tp u lihat la sdr apa dah jd dgn shoutbox sy...hahaha...sy dah blur la...hehehe...dah try ambik link pic pun tetap jpg...nnt u tglkan pesanan kt shoutbox sy k.thanz..

Zura said...

salam amiey...
akak nk tnye cm ne erk nk buat word shoutbox tue...sementara nie akak gune code yg amiey bg tue...sebab akak nk create sendiri lah word tue...tp xreti nak buat kat mana...

siti faridah harun (nama penuh tu) said...

wah !!!!!! ida dh berjaya buat !!,, thnks emiey !! thnk u so much !! huhu

"DIARI SEORANG PUTERI" said...

thanz . .
da jd wat daa. .

miszlullaby said...

ML amek ye..thanx!!=D

wiwie s. said...

salam,
dh try buat n jd.. tapiiii, gambar shoutbox tu x keluar la.. nape eh?

emieysandra said...

mungkin loading lmbt, cube refresh byk kali ;)

ieda said...

thanx dikk amat2 membantu .. thanx again sbb x lokek ilmu :)

aku awan kitaro said...

salam, weyh thanks bebyk! aku da wat da hasil tnjk ajar sifu tongga nie.. klu rajin nak tgk hasil tgn,kmptr,mouse, PC,CPu aku nie.. jengguk la kat my belog

akuawankitaro.blogspot.com

arigato =)

Elahh Booncet said...

Thanks a lot !
sgt sgt be guna tuk new blogger cam sy neh ;D

zaty danny said...

sy penink sedikit..
hehe
tapi.. berminat..
hehe

pYka said...

thanx a lot...it's helping...

noraznida said...

nida amik ye....kbetulan sesuai lak dgn blog nida.....le x..?

*malu2 ni..hihi

jan said...

saya amek taw (:

akhmal ariff kepal said...

da jadi . thanks :)

Adra Adiella said...

sy mintak izin amek code dan tutorial kt sini ye...thnks!

Anonymous said...

npe tak dpt2 wat nie.. Tulung2!! huhu..

nur izzati zakaria said...

sy amik gmbar tu . hihi .

nur izzati zakaria said...

sy amik gmbar tu . hihi .

syafeeqa said...

thanks :) pinjam shoutbox n gambar shoutbox tau :)

hidayah said...

thnks :)

chipblueberry said...

link tu na ltk kt mne ark..

EpuL EirA said...

tq utk tuto nie..
n jgn marah coz copy gambar shoutbox tue..=)

fyza oh fyza said...

sy amek eh gmbr comel uh huhu :D

saLmah said...

sye amek gambar tuwh..:)