Home » , , » Cara Membuat Shoutbox Versi Ajax

Cara Membuat Shoutbox Versi Ajax

Monday, July 5, 2010


Salam..Mijie baru je buat pasal shoutbox guna ajax ni dan ingin juga mijie berkongsi dengan korang semua cara untuk membuatnya. Untuk pengetahuan korang semua, penggunaan kod  ajax lebih ringan daripada biasa(javascript). Untuk lebih lanjut baca tentang ajax. Korang boleh minta tolong je dengan pakcik google..Confirm dia bantu. Ok dengan masa yg sedikit ni(curik opis hour). Mijie akan akan terangkan step2 nye...

Step 1 : Login Dashboard => Design => Add a Widget => Pilih HTML/Javascript .
Step 2 : Copy kod dibawah dan pastekan pada content..  
<!-- Start Ajax Popup Shoutbox by Mijie -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>
$(document).ready(function() {
//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();



//Get the A tag

var id = $(this).attr('href');



//Get the screen height and width

var maskHeight = $(document).height();

var maskWidth = $(window).width();



//Set heigth and width to mask to fill up the whole screen

$('#mask').css({'width':maskWidth,'height':maskHeight});



//transition effect

$('#mask').fadeIn(1000);

$('#mask').fadeTo("slow",0.8);



//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();



//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);



//transition effect

$(id).fadeIn(2000);



});



//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#mask').hide();

$('.window').hide();

});



//if mask is clicked

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});



});
</script>

<style>
img { border: none; }
#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#boxes .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}
#boxes #mijieshoutbox {

background:url(http://4.bp.blogspot.com/_5jbp4DbrUeY/TDBnd8hqw_I/AAAAAAAAARc/PTkAREQbwfs/s1600/lightblack.PNG) no-repeat 0 0 transparent;

width:272px;

height:460px;

padding:56px 0 20px 5px;

}
#closesb {

padding:2px 0 0 0;

}
#author {

padding:8px 0 0 168px;

}
</style>


<ul><center> <a href="#mijieshoutbox" name="modal"><img src="http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="mijieshoutbox" class="window">

<!-- Begin ShoutMix - http://www.shoutmix.com -->
Masukkan Kod ShoutBox Anda Disini
<!-- End ShoutMix -->

<div id="author"><a target="blank" href="http://mymijie.blogspot.com/2010/07/cara-membuat-shoutbox-dengan-ajax.html"/><img src="http://img.photobucket.com/albums/v486/mafiatrg/linky.png" /></a>

</div><div id="closesb"><input type="button" value="Close" class="close" />

</div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->

<div id="mask"></div></div>

<!-- End of Ajax Popup Shoutbox by Mijie -->

Step 3 : Masukkan kod shout anda pada perkataan “Masukkan Kod Shoutbox Anda Disini” diatas.
Step 4 : Pastikan width='261' dan height='380' . Contoh seperti dibawah. 

<!-- Begin ShoutMix - http://www.shoutmix.com -->     <iframe frameborder='0' height='380px' scrolling='yes' src='http://www5.shoutmix.com/?mijie0512' title='mijie0512' width='261px'><a href='http://www5.shoutmix.com/?mijie0512'>View shoutbox</a></iframe><br /><a href='http://www.shoutmix.com' title='get your own free shoutbox chat widget at shoutmix!' target='_blank'>GetShoutBox</a><br /><!-- End ShoutMix -->


Step 5 : kemudian SAVE. Klik PREVIEW untuk lihat hasilnya.
Untuk menukar frame shoutbox. Anda tukar kod ni
http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/lightblack.png dan untuk menukar images pada blog anda tukar kod nie
http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab.png.
Untuk mendapatkan lebih banyak frame untuk kesukaan anda. Silalah ke blog Raybond. Mijie dapat kod ni pun dari sana tapi kod yang ni telah dikemaskini semula oleh mijie.Thanks a lot Raybond. Jasa mu dikenang..:)

Lagi tutorial klik sini..

66 dah komen:

ikeen 7/05/2010 11:11 PM  

style la mijie :)

Mijie 7/05/2010 11:32 PM  

@ikeen

eh2..xde ar ikeen..bese2 jelah..puas2 explore skit2..:)

Viva Sakura 7/06/2010 2:42 AM  

bagus ni mijie...tq..

nuriz 7/06/2010 8:07 AM  

mcm ringan je bila pop up dia kluar.nt le bila 2 leh try. rajin mijie wat tutorial.

NaNaJoe 7/06/2010 9:34 AM  

mula2 nana caru sbox mijie..
upenye da tukar style baru..heheh~~
canggih2!! :)

Mijie 7/06/2010 10:02 AM  

@Viva Sakura

a'h..bgs jgk..boleh je nak guna..

Mijie 7/06/2010 10:22 AM  

@nuriz

a'ah ringan skit..guna ajax kan. utk pop up, klu xde internet pn still dpt kuar jgk sbox 2..tp msg xleh sent r coz guna server cbox plk kn..hihi

emm..xpe kongsi ilmu yg baik..:)

Affan Ruslan 7/06/2010 12:04 PM  

Salam bro.
apa ye kelebihan die?
ringan je ke?

jauh tak beza dgn java?
hehe

Mijie 7/06/2010 12:51 PM  

@Affan Ruslan

wsalam bro..bnyk jgk kelebihan dia..ia lebih ringan drp javascript n 1 lgi klu internet slow. dia ttp kuar..nnti mijie post entry serba sedikit pasal ajax

zulkbo 7/07/2010 1:08 AM  

salam mijie..
berguna ni..
nampak modern
tapi saya prefer
yang lama lagi

Mijie 7/07/2010 8:26 PM  

@zulkbo

wsalam..a'ah berguna juga nie..nnti boleh try yg nie plk..:)

S.I.T.I 7/08/2010 9:41 AM  

wahh..best bestt

Mah@mahu 7/08/2010 11:37 AM  

aku nak shout kat maner bro...

Wan Gerrard 7/08/2010 12:51 PM  

Apsal macam x jadi je?
Xbole nak tulis kt ne pun

Mijie 7/08/2010 2:05 PM  

@NaNaJoe

huh..baru kuar messagge nana nie..bru ni problem x kuar lah..emm nmpk style sikit guna yg nie..hehe..:)

Mijie 7/08/2010 2:06 PM  

@S.I.T.I

emm..bez jgk..bgs siti dh buat..:)

Mijie 7/08/2010 2:07 PM  

@Mah@mahu

shout kat atas kt sidebar 2..klik je..nnti dia kuar..

Mijie 7/08/2010 2:07 PM  

@Wan Gerrard

hah..x jadi??..knp plk??..emm dh betul ke step2 2?.

Raybond 7/08/2010 8:21 PM  

welcome2.. =)
ada tutorial best.. share2 la bro..

Mijie 7/08/2010 10:34 PM  

@Raybond

ad je..kat menu tutorial..nnti time free aku bt lagi. semua benda yg ad dlm blog ni aku akan bt tutorial. tp x de masa ar..busy sikit..

ERSHAD 7/09/2010 12:23 PM  

nanti bile2 free, insyaallah akan cuba.

Linda~~ 7/13/2010 10:13 PM  

best nye gune shoutbox tuh..nice!!tp org x try ag r..xde mase..huhu..blog org pn buruk..hahahaha.blog mijie nice~~

Mijie 7/14/2010 9:47 AM  

@ERSHAD

a'ah..free2 try buat..:)

Mijie 7/14/2010 9:49 AM  

@Linda~~

a'ah..bez jgk..emm xpe Linda nnti try ar..eh xde ar..blog mijie pun bese2 je..

SyoknyaDownload 7/17/2010 10:26 AM  

thanks...

dah jadi..

tapi masih ciplak tuanya punya gambar,,merah...

www.syoknyadownload.blogspot.com

.hana. 7/18/2010 9:24 PM  

alamak mijie,ade prob laa ;((
npe kt blog hana bile tekan icon shoutbox tuh,transition effect dia mcm pelik??
yg effect bile tekan jek nnti blkg shoutbox tuh jd hitam en..
effect nye kt belah kanan blog jek,bkn seluruh blog.. ;(((

Mijie 7/19/2010 1:59 PM  

@.hana.

a'ah..mijie perasan jugak bila masuk blog hana..mungkin ad kesilapan sikit kot kt mask 2..nnti kene cek blik tp yg mijie ok plk..

^^maSsHimaRo^^ 7/19/2010 3:53 PM  

thanks mijie...
nice lor...hehe..=)

deela~ 7/19/2010 5:00 PM  

mekasih encik mijie...
sy dh try =)

Mijie 7/19/2010 11:47 PM  

@^^maSsHimaRo^^

welcome mashi..bgs2 dh buat..:)

Mijie 7/19/2010 11:48 PM  

@deela~

sama2 cik deela..bgs ar dh buat..:)

Amri Rani 7/24/2010 11:14 AM  

salam Mijie...dah amik petua ni ari tu...lupa nk ucap tq byk2...
maaf deh..al maklum laa..pokcik dah tuo....

Mijie 7/26/2010 1:39 AM  

@Amri Rani

wsalam..sory lmbt reply..agak bz+tenet problem..ok same2...xpe je nk ambik...:)

dunspeak♥ 7/30/2010 7:38 PM  

mijie..trimass atas tutorial ni..cikbelog pun dah guna ajax ni..hehee

Miza Yusof 8/03/2010 2:15 PM  

thanks mijie. miza copy ye. nak cuba shoutbox mcm ni plak :)

Mijie 8/03/2010 5:06 PM  

@Miza Yusof

welcome miza..bagus3.:)

KieRinZ 8/03/2010 8:00 PM  

@.hana.A'ah.. sy wat pun jadi cmtu jugak.. mijie pat la cari solutionnyer.. adeh..

Mijie 8/03/2010 9:06 PM  

@KieRinZ

yg 2 dh set auto ikut saiz screen..tgk kod bawah komen ni..

//Get the screen height and width
var maskHeight = $(document).height();

var maskWidth = $(window).width();

emm..mijie xleh nk try n error sbb sini ok je.=)

Adisaufi 8/22/2010 12:14 AM  

dh buat tp shout box tk kuar..guane ni...

KHAIRUNNIESA 8/28/2010 5:54 AM  

wwaaa....chantek la mijie..hihi... thanks!

Mijie 8/30/2010 9:41 AM  

@Adisaufi


owh yeke..aik..dh btul ke letk sbox 2?

Mijie 10/02/2010 6:26 PM  

@whitelily~

u're welcome..no hal lah..:)

mie 11/02/2010 2:36 AM  

gue de try...
sama problem dgn hana....
kod tu sama je...
confuse skit

Nadia Harnisa 11/16/2010 11:27 AM  

Saya dah try...
trimasssss

:D

Pink Gurlz 11/16/2010 2:27 PM  

cane nk msokkan kod shout kat 'Masukkan kod shoutbox anda di sini' ? sye wat x leh pon .. .

hunny d bunny 11/17/2010 10:38 AM  

mickey pun x tau nk masukkan apa kat 'Masukkan kod shoutbox anda di sini' ?

Nadia Harnisa 11/18/2010 4:48 PM  

yg tuh kod shoutbox kite.. kene register dulu

Mijie 11/22/2010 1:17 PM  

@mie

yg 2 atas template..kdang2 ok2..kdang x..ssh sikit nk cari solution..klu nk snng..letak pling atas..

Mijie 11/22/2010 1:18 PM  

@Pink Gurlz

awk copy kod sbox awk, pstu replace kt tempat 2..confirm jd..;)

Mijie 11/22/2010 1:19 PM  

@hunny d bunny

mickey..awk kene reg dulu kt sbox..lpas 2 copy kod shoutbox tu n then tukar dengan perkataan tersebut.

fatin nabilah ;) 12/30/2010 10:36 AM  

kalau pakai classic template pun boleh gune ke ?

H Y D E 2/11/2011 7:47 AM  

en.mijie... entah kenapa bila butang shoutmix ni ditekan & bila visitor nak komen effect di background x jadi dark macam di blog saudara ni pun?... kenapa ya.. yang lain2 nya ok x de masalah.. ni aje masalahnya. harap dapat tolong :)

Mijie 2/11/2011 12:46 PM  

@H Y D E

Biasa jadi mcm ni sbb template yg kita guna. so, ssh sikit nk betulkan yg mask tu.

Ejoy 2/12/2011 4:13 AM  

xjadi ler bro ...

zatie razak 3/10/2011 10:39 AM  

x jadi juga la..dah byk kali try..

Mijie 3/10/2011 10:41 PM  

@to Ejoy n zatie razak..

eh x jd ke?..apa problem yg keluar tu ek?..blh bgtahu selain daripada problem yang gelap x center tu.

Anonymous,  9/29/2011 9:47 PM  

urmm nak tanye yer. .dh try buat mmg jdi tpi bila sye tkn cbox tuh dia kuar mcm yg sye nak tpi ade petak besar waner hitam kuar skali , , mcm mne nak hilangkan , ,, trimas :)

Mijie 9/29/2011 10:59 PM  

@Anonymous

ok..kalau nk buangkan yang hitam belakang tu just pdam kod nie...

background-color:#000;

ok..:)

Post a Comment

Sila Tinggalkan komen korang kat sini yer..
InsyaAllah setiap komen dari korang aku akan blas..:)

DeSiGn By MiJiE BloG @ 2011. Powered by Blogger.