Tutorial : Shoutbox versi Ajax

Sebelum tekan :

Selepas tekan :

Hai semua . Apa khabar . Semua sihat kann ? Oke , harini nak ajar cara nak buat ajax shoutbox . Hehe . Ini ajax punya taw .Ajax neyh , dia muncul kat tengah taw . Kalau nak hide punya boleh ke sini  . Kalau hide neyh , dia macam . Alah , susah laa nak terngkan . Korang cuba jee la ye , Kalau korang nak .Oke . Ade lagi satu punya , Slide float shoutbox . Tapi itu akan datang oke ? Harini kita buat ajax dulu . Oke jom kita mulakan .
 First , Log in   Dashboard   design   add a gadget   Html / Javascript . Lepastuh , kopi  copy kod dekat bawah neyh oke .

<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://i721.photobucket.com/albums/ww214/krulnurul/bgg.jpg) no-repeat 0 0 transparent; width:320px; height:400px; padding:50px 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://i721.photobucket.com/albums/ww214/krulnurul/rtyrt.png" border="0" /></a> </center> </ul> <div id="boxes"> <!-- Start Shoutbox --> <div id="wanhazelshoutbox" class="window"> <!-- Begin ShoutMix - http://www.shoutmix.com/ --><center> <center> LETAK CODE SHOUTBOX AWAK DISINI YE :) </center> <!-- End ShoutMix --> <div id="author"> </div><div id="closesb"><center><input type="button" value="Close" class="close" /><center> </center></center></div></center></div><!-- End of Ajax Shoutbox --> <!-- Mask to cover the whole screen --

Lepastu , pastekan dekat Html / Javascript tu oke ?

 Nota kaki :

Warna oren : Code shoutbox korang .
Warna merah : Background korang . Kalau korang tak nak letak , Korang kosongkan jer bahagian tu oke ? Kalau korang nak , Boleh ambik kat sini
Warna biru : Icon untuk shoutbox korang . Kalau nak , boleh ambik kat sini .