Tutorial Ajax Float Shoutbox

السلام عليكم و رحمة الله و بركاته

Assalamualaikum..tuto ni eka nak buat sebab ade owg tnyer..kih3..mcm mne nak buat shoutbox kat tepi..ditanya oleh SAYTZEFF

1.Design>Page Element>Add A Gadget>Html/Javascript

2.Copy code di bawah dalam ruangan html/javascript tadi

<!-- 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(URL BACKGROUND) 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="URL ICON SHOUTBOX" border="0" /></a> </center> </ul>


<div id="boxes">


<!-- Start Shoutbox -->


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


CODE SHOUTMIX


</center><!-- 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-->

*URL BACKGROUND..tuk background shoutbox korang..xnak ltak pon xper

*URL ICON BACKGROUND..tuk icon shoutbox korang

*CODE SHOUTMIX..tuk code shoutmix korang la..

Selamat mencuba..

CREDIT