Tutorial Ajax Shoutbox

Assalamualaikum ..


Ajax shoutbox ni macam yang Tia tengah guna sekarang. Tengok dekat tepi tu. Slow motion tergedik-gedik je dia nak keluar kan. Hahaa! Dah Tia pun tergedik-gedik nak pakai. Tapi okeylah, boleh jimat ruang sikit. Berat tu, Tia tak terasa sangat.


Korang boleh reka sendiri sebenarnya background shoutbox tu dengan gambar utama tu (Tia tak tau nak gelar apa). Tapi kena pandai adjust lah nanti sampai shoutmix tu betul-betul masuk dalam background tu.


Sebelum tu, jangan gedik-gedik nak tanya Tia dari mana Tia dapat tutorial ni sebab Tia dah tak ingat. Okey kita mula..


Step 1 : Settings > Design > Page Elements > Add a Gadget > Pilih HTML/JavaScript > Masukkan code di bawah..

-----------------------------------------------------------

<div style='display:scroll; position:fixed; top:70px; right:-0px;'>

<!-- Start Ajax Popup Shoutbox by -->

<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});







//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:center;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}



#boxes .window {

position:fixed;

left:0;

top:0;

width:271px;

height:480px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

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

width:271px;

height:480px;

padding:56px 0 20px 5px;

}

#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="http://i1039.photobucket.com/albums/a472/mijie88/Fail%20Blogspot/shoutboxtab2.png" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">
<!-- Begin ShoutMix - http://www.shoutmix.com/ -->

CODE SHOUTMIX

<!-- End ShoutMix -->

<div id="author">

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

</center></center></div></div><!-- End of Ajax Shoutbox -->

<!-- Mask to cover the whole screen -->

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

<!-- End of Ajax Popup Shoutbox--></div>

-----------------------------------------------------------

Tia tau panjang. Tapi percayalah, tak susah mana pun. Sekarang korang kena edit sikit. Tengok warna-warna tulisan yang Tia warnakan dalam code kat atas tu ye..


Merah : Itu background shoutbox korang. Kalau korang ada reka sendiri, gantikan aje URL tulisan warna merah tu dengan URL gambar background korang ye. Kalau tak nak, tak payah tukar..


Fuchsia : Yang tu gambar utama. Kan kena klik dulu baru keluar kotak shout. Itulah dia. Kalau korang pun ada buat rekaan sendiri contoh gambar korang ke, haa! Ganti URL tu dengan URL gambar korang sendiri. Tak nak, tak payah usik.


Biru : Nampak tak betapa besar gedabaknya tulisan tu. Hahaa! Yaa, kat situ code shoutmix korang.


Hijau : Sekiranya korang guna background shout korang sendiri, korang kena try and error pada tulisan berwarna hijau tu supaya kotak shout korang betul-betul masuk dalam background tu ye.


Okey selesai sudah tutorial ni. Hahaaa! Hmm, maaf. Tia tau ada lagi beberapa request tutorial. Tia akan cuba selaju mungkin siapkan tutorial tu yee..

Sekian...
Previous
Next Post »

21 Comments

Click here for Comments
ANDAIANNYA
admin
July 14, 2011 at 2:51 PM ×

Tq....dr dulu nak buat benda ni..xjd2

Reply
avatar
Unknown
admin
July 14, 2011 at 2:58 PM ×

thanks tia..malam karang nak cuba la..hihi

Reply
avatar
Unknown
admin
July 14, 2011 at 3:09 PM ×

Rajin Tia buat tutor.. hehe

Reply
avatar
Anonymous
admin
July 14, 2011 at 3:15 PM ×

tia!! gee dah pasang.. huahaha.. ^^

Reply
avatar
TiTi
admin
July 14, 2011 at 3:23 PM ×

okay nak cuba gak! :D

Reply
avatar
RHI
admin
July 14, 2011 at 3:29 PM ×

Tia, kakak nak toturial favicon tu, kakak tak faham yg BA punya

Reply
avatar
Unknown
admin
July 14, 2011 at 3:53 PM ×

mmg pnjg pon tia, naek juling nk tengok..tp nak kne tggu line berok band ni laju bru smgt nak buat. btw tq 4 this..

Reply
avatar
myzziema
admin
July 14, 2011 at 4:02 PM ×

gila panjang code dia. haha. ziema guna manual je sebab jarang balas jejak kat shoutbox. hee.

Reply
avatar
anez zamri
admin
July 14, 2011 at 4:46 PM ×

Tutorial yang bagus..nanti free nak buat.. :D

Reply
avatar
Areyoudys
admin
July 14, 2011 at 4:58 PM ×

as salam...
ni la la kod script yang ringan~
kalau guna javascript biasa2 tu, haih..berat la juga..

>_<

baguih! teruskan ber-tutorial~

=)

Reply
avatar
Wanie
admin
July 14, 2011 at 5:04 PM ×

shout ni name ajax rupenye..
dulu dok cari gak kod ni..

Reply
avatar
July 14, 2011 at 5:23 PM ×

nampak macam susah jek..haha

Reply
avatar
m
admin
July 14, 2011 at 5:33 PM ×

pjgnye code dia... tp shoutbox tesebut comel =)

Reply
avatar
adan
admin
July 14, 2011 at 5:37 PM ×

tia.. sudah ku try.. tp ndak jadi.. surrender joo.. ko buatkan bah kawannnnnn... kawan kan kita kan..

Reply
avatar
EzayHadry
admin
July 14, 2011 at 7:11 PM ×

rjin2 ni..memang comel la ajax shoutbox ni..eyh tia dah tau belum tia menang GA ezay yang aritu tu..g jenguk sane jangan lupa bagi details k

Reply
avatar
Unknown
admin
July 15, 2011 at 2:24 PM ×

tia...ade ralat kat situ...tapi sikit je...dekat code wanrne fuchsia(first time denga nih)...img src=" xpatot di warnekan....warne patot start dari http:// kan??
takot orang keliru...kalau yang expert...xde masalah...takot yang x pert tu..menggigil lutut nnti..haha..
btw...thanx for the tuto...
^_^

Reply
avatar
July 15, 2011 at 4:08 PM ×

@shah shah !!!! thanks sangat2 . Tia dah ubah pun . hehe :)

Reply
avatar
Unknown
admin
July 15, 2011 at 5:21 PM ×

welcome tiaaa....shah pon da pakai pop up shoutbox....hahah...

Reply
avatar
July 29, 2011 at 1:30 PM ×

thanx....da menjadi..=)

Reply
avatar
Anonymous
admin
September 12, 2011 at 1:36 PM ×

Tia, kalau butang close sudah ditekan tapi shoutbox x hilang..error kat mane tu...dari tadi lagi cari kat mane slap tapi x jumpa...cube Tia tengok..

http://testing-a-chik.blogspot.com/

Reply
avatar
January 16, 2012 at 7:10 PM ×

tq kak tia ! menjadi pun... hikhik :) <3 U kak..

Reply
avatar