Thursday, November 4, 2010

.tutorial #28 - chatbox yang menyorok

.

Salam Readers~

Perghh dah lamaaaaaaaaaa gila I tak buat tutorial kan kan kan? Heee~ Benda ni dah lama I KIV, tapi since I pun dah habis exam, I pun dengan senang hatinya buat lah tutorial ini. Ramai yang dah tau, tapi pada yang tak tahu, boleh belajar k. Oh yer, tutorial ni, Cik Ira yang request :)

1) Bukak Dashboard - Page Element - Add Gadjet - HTML/Javascript
2) Copy semua code dekat 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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/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">

COPY DAN PASTE CODE CHATBOX KORANG DEKAT SINI YER.

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

3) Then, gi tengok balik code dekat atas ni dan copy paste code sebenar chat box korang kat tempat yang I suruh tu.

4) Tak payah tulis apa-apa title dekat gadjet ni.

5) Tekan Save. Then siap! Heeee~~

Extra!
1) Tapi kalau korang nak edit sendiri gambar chatbox korang macam chatbox I (Alaaa...yang I letak gambar adik I tuh, Chacha), korang boleh edit sendiri guna photoshop tak pun guna photoscape sudeyyy. Size pandai-pandai lah korang resize ekkk.

2) Replace link gambar baru ke link lama. (I dah bold kan dah link gambar tuh kat code atas tu ekk)

Senang kan?
Selamat Mencuba! :)

Bai!

89 comments

myra amalina said...

hai . tengs tao . myra na cube ny

Anna Boleyn said...

layout baru sangat comel c's. :)

Fyka said...

Sy guna tutorial ni sis..
hehe..

suffer8zine said...

wahhh nice tuto :P

Terkini : Katak makan tikus

Nurul chumel said...

wah..pandainye chekgu intan!
:)

mizz sue said...

tenkiu! su dah buat

mizz sue said...

tenkiu ajar ni..puas cari cam ner nak buat mcm u pya

Noor Faezah Mazli said...

THANKS. tutorial yg I tunggu2. dah try dah.

cik nur said...

intan mcm mana mintak tlong ajar mcm mna nak letak link entry sebelum ke dalam entry pastuh mintak tlong lagi bleh mcm mna nk letak link org lain kat dlam blog kita tapi letak nama ble klik nama tuh automatik pergi ke blog org tuh please2 ajr :)

/Dayah//Nurul/ said...

tqvm.
intan.
acane nk letak pic chatbx.
takle letak gamba yuna, i pinjm yurs

.s.o.f.i.a. said...

menarik!!! thanks....

ika said...

CODE YANG MANE KENA COPY TU.. IKA X FHM

intanurulfateha said...

@myra amalina

ok, gudlak!

intanurulfateha said...

@Anna Boleyn

tq sygs~

intanurulfateha said...

@Fyka

oke fyka :")

intanurulfateha said...

@suffer8zine
tq :)

intanurulfateha said...

@Nurul chumel

haha sennag je kot

intanurulfateha said...

@mizz sue

welkem sue :)

intanurulfateha said...

@mizz sue

heee! :)

intanurulfateha said...

@Noor Faezah Mazli

oke!
gudlak~ :)

intanurulfateha said...

@cik nur

hyperlink kan lah

mule3 u tulis name die
then u highlight name tu
then klik hyperlink, masukkan link blog die
then siap! :)

intanurulfateha said...

@/Dayah//Nurul/

huhu g edit gmbr yuna gune photoshop
aritu dah ajar kn? ;p

intanurulfateha said...

@.s.o.f.i.a.

welkem sygs~ :P

intanurulfateha said...

@ika

code dlm kotak tuh la

kay said...

terbaik!!!!!!!!!!!!
muaaaaaaaaaaaaaaaaaahx!

iRa~" said...

sis, da jadiiiii!haha..
tqsm sis!likeee2..
apsal ira pnya besar gedabak?heeeh

misz yana said...

thanx intan!!!
yana pon guna tuto ni..:p

M@huJadiBuDakBaek said...

thanks intan 4 your tutorial....ske sgt..tp xley la msk kn picca...da try tp x jd...xthu pe mslh...huhu

eira said...
This comment has been removed by the author.
wewwOFhszy said...

thnx for the tutorial :) dah letak your banner at my page :)

Mimie said...

macam mana nk tukar tabs shoutbox ?

Marsila said...

hye~thanx utk tuto nie..huhu :D

nana said...

nak tanya.. cmne nak ltak gamba and tajuk sndri something kat chatbox tuh.mcm yg u buat tue. gamba dah try ltak tp xboleh sbb bsar sgt utk space kecik tuh. aiyok

syeeraa sjaa ! said...

macam mne nk buadd ? err , agk ta pham . --' :)

Ezzah said...

saya dah cuba. menjadi. thank you soo much sudi mengajar ^_^

◕‿◕ misz jannah ◕‿◕ said...

kak intan , ta bole . shoutbox , tp ta kuar ape2 . aduu , cmne yepp ? help me pls

mizmiEe said...

hai.. sy dah cuba :)

syazana said...

akak !!!!!!!!!!!!!!!!!!

ajar saya macam mana nak buat letak gambar budak dgn akak buat nama sendiri ''chat box angah saya'' tuu !


please ! lau tulis shoutmix hijau tu ta cntek !

please replay !

Διи Ƨαғғιʏαн said...

ohh , terima kasih !

délicieux Cadbury Diary chocalate said...

tengss kak..
dh jd..
hehe

tNie said...

tenggss~~ skali lg..hehe..blog awak nie mmg bnyk membantu bagi new blogger mcm sy..hik3..tengs3..^_^

siti fatimah said...

tengs ! sangat mmbantu !

tNie said...

intan~~ yeahhh!! berjaya..hehehe..tgl pic kat shoutmix ngan divider arr..huk3..neway...thx a lot..^_^

faraheartbeat said...

ok . da bjaye . hehe . tanks taw :))

jesse said...

i nk buat chat box tersorok tue..tp i xdpt finish it..i xphm sgt..help me plss

Nadhirah said...

hye sis..sy nk tnye,cmne nih?? sy x brp phm an steps nih...ley x xplain kt sy scara detail???

n cmne nk edit kt photoshop or photoscape???

RINA JAFRI said...

kaka , syee ta phm lhaa . sorii
boley xplain kan

ika said...

SIS
URL PIC SIS,BUAT KAT WEB MANA?

LEPAS TU. URL YANG ASAL TUK TUKA DENGN URL PIC KITA KAN?

NAPE IKA TUKA DENGN URL yg ika buat..X KUAR PIC... KE ada KOD yang kena tuka?

intanurulfateha said...

@ika

sis upload kt photobucket
mungkin pic ika tu besa sgt kot

intanurulfateha said...

KEPADA YANG LAIN

i dah xplain clearly
fahamkan betul3 k:)

JAGUAR said...

CAMNEW NAK LETAK PPICC???

tnie si keciK said...

cik intan~~ da berjayeee...hehehe..thx bnyk2 tau..^_^

FARISUKIMI said...

nk tnye ni..npe chatbox kcik n ble faris add url pic jd kcik je die kuar, xmcm fatin pnye..

♥●Dhia As-syifaa♥● said...

cmna nk ubah size (width or height kotak tulis shoutbox tu ek??

Nani Sokri said...

knpe kecik je die kluar ? kecik gile !

SYIMA said...

knapa gmbr kcil je....2 pun kluar sparuh je gmbr,,,,mcm mana nak ejas saiz dmbr 2?

muhammad hazim ahmad bin ahmad said...

saya da cuba letak direct link dari photobucket ,,
tapi tak jadi lorh ,,
saya cuba buat yang macam gamba adik kamu ,,
tapi x menjadi ,,
boleh x bntu saya ???

Nur Syawanie said...

akak saye x paham yang gambar tu lah,,saye x faham yang replace link tu..blh akak jelaskan dengan lebih lanjut..

ysmnblh said...

thanks fr the tutorial :)

nurzulaikha said...

Sye gune tutorial tu .

eYrA sToRy'S said...

aii akk...
eyra nk cbe bnde nie bley ..??
tpy eyra x thu nk copy kat mne ..
plez help me .. =(

fadhdeela said...

huhu sgt membantu!!! hihihi

im following u :P

Jom singgah: Juara Lagu 25..xbest!

GaDiS OGi' JoRo' said...

dah buat..
yeay!
thnx u..:)

fariza fauzi said...

hey !!i xde masalah bab shoutmix ni tp i ada masalah bab nak letak gambar kat shoutmix ni..

i x faham replace link tu..link yg mne kita nk kne amek ye??

i dah try but x jd

JaMaL Arif Rosman said...

camne nak replace pic eh.. x paham la.. tolong please.. haha n camne nak bwt shout box ijau tu jadi colour laen??

pabilajarijemarimenari said...

annyong......
tq akak...
ttorial akak mmg bnyk bguna sngt....
kamsahamida....

singgah la kat fb saya....
saya bru lg dlm dunia blogging nih
plu nasiaht dr akak....

nih link saya
http://pabilajarijemarimenari.blogspot.com/

sYaSyA ◕‿◕ said...

...thanz kak...mmg t`cri sesanad tuto ney...i`m new at bloggie...thanz k...
lau ta bz singgah larh tat http:??ceritahatysya.blogspot.com/

Cherry Blossom Wardrobe said...

saya guna tutorial nie..tq :)

Syaz said...

ada yg nak kena tukar tuh..x jumpa lah...(gb.style.right = (30-gb.offsetWidth).toString() + "px";)
yg nie pon x jumpa..mcm ner ni??peninglahh...

aQ!LaH said...

akak nk tukar tajuk 2 mcm maner eh?
yg akak punyer 2
yg ''jom chat angan saya''
plz reply

ct N honey said...

terima kasih pasal tutorial tu,dah lama saya mencarinya,baru skrang saya mendapat.

Ena said...

sye tak paham. bley terangkan lg?
sye da buat yg hide ape sume tuh.. tp xley tulis pun??

the fia said...

akk thnks da boleh da. tp tggl ltk pic jek. maceh taw!

alynn malynna said...

sis intan..
kite curi idea pasang chatbox nie...
halalkan ok!

Wani Ahmad said...

thank you cikgu intan ... hehe :)

Azza Rynna said...

nape bile azza wat dia jadik cam berlapis..ade dua shoutbox..pelik lah..

Cuppy Cake said...

cikgu intan....thnks sgt2!!!
u mmg tut0r yg baek...hehehe!!!
:D

♥♥LiSsA♥♥ said...

waaaa.lisa da cube wat. tapi nape gambar lisa jadi kecik.huhuhu

syasya ; ) said...

thanks :D find it very useful :)

WidadCutieyGirlZ StorY said...

intan...i nak copy u pnyer code yer...boleh??? nak buat kt blog saya

Iman Omel said...

Thenks sbb ajar . link tuh amek dri link google images nk replace gamba shoutmix tu bole ke ? i mean amek link dri google images?

PikieLLe Lova said...

dear..nape i da ltak pic still x kuar pic kat tepi 2..??

NuR JiE said...

thanx awk for this tutorial..sgt2 menjadi dan berguna..hehe ^_^

eqah azmi said...

thank you..chatbox 2 dh jd..
cuma mcam mane ek nk letak tajuk sndiri mcm yg intan punya 2???
boleh bgthu x???

a i d a ; said...

thanxx intan!
da jd da.. =)

ChOcOLaTe LuV said...

@myra amalina
tp npe bila sy dah copykan dy kuar shout box tu 2???

Azzlyn said...

x phm lhaa kak?x phm yg COPY DAN PASTE CODE CHATBOX KORANG DEKAT SINI YER..??

♥_♥cahaya fatiha♥_♥ said...

adeh.i gagal dengan tutorial sng nie.isk!xjdik sis~:(

jin toncet . said...

step 3 ta fham lah..

 

About Me

My Photo
intanurulfateha
Muar, Johor, Malaysia
Eh, dah ada dua orang baby girl! ;) | Berdaftar dengan SSM, Double I Excellent Enterprise : JR0046896-W | For any inquiries, whatsapp 012-7186471
View my complete profile

#our journey

Friends since 2008
Getting Close since Nov 2010

Daisypath Anniversary tickers

Love is not a matter of counting the years, it is about making the years!

Daisypath Anniversary tickers

Alhamdulillah.. :')

Daisypath Anniversary tickers

Jantung, Hati, Limpa, Paru

Wanita di jadikan atas nama cinta.
Kalau cari, mesti jumpa.

Dan kamu,
Mohammad Noor Irfan;
Terima kasih kerana mencari saya semula!

Hep ! ! !
Curik hati kite ekk!

Tapi tak per..
Kite suke~

(^__^)

#irfanintanJR

#irfanintanJR
Aleesya Eryna

Kesayangan 31-3-13

Kesayangan 31-3-13