TUTORIAL : AJAX FLOAT SHOUTBOX/SHOUTMIX

Assalammualaikum & Selamat Sejahtera

tak mahu cakap banyak..jom kita buat sama-sama Ajax Float shoutbox/shoutmix ini, tutorial ini diminta oleh SHIDA

Step 1

korang kena reka sendiri button shoutmix/shoutbox korang yang selalu korang letak dekat bahagian tepi tu.

contoh button yang aida buat

blog Diari Si Gemuk

untuk button ini korang buat saiz 64x64 pun dah cukup, kalau nak transparent pun boleh tak nak pun boleh. Korang buat la ikut kreativiti korang..hehe. Korang kan kreatif..

kemudian korang dapatkan URL bagi button tu ok? cara nak dapatkan URL korang tahu kan..photobucket, imageshack atau upload dalam blog pun boleh. 

Step 2

Korang edit plak background untuk shoutmix/shoutbox korang pulak, saiz ikut korang nya shoutmix/shoutbox. Kalau width korang 260 dan height korang 300 korang buat la saiz background korang 350x350 korang lebih kan sikit saiz dari saiz asal. Edit lah bagi cun-cun, smart-smart. 

contoh background

kemudian save dan dapatkan URL nya.

Step 3

Dashboard > Design > Add a Gadget > HTML/Javascript

Step 4

Copy code dibawah ini dan paste kan dekat HTML/Javascript

<!-- 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:400px;
height:500px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #ajax {
background:url(URL BACKGROUND) no-repeat 0 0
transparent;
width:400px;
height:500px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#ajax" name="modal"><img
src="URL BUTTON" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="ajax" class="window"><!-- Begin ShoutMix
- http://www.shoutmix.com/ --><center>


<br/>
<br/>
<center>
CODE SHOUTMIX/SHOUTBOX
</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-->

Step 5 

korang masukkan URL button, background dan shoutmix/shoutbox korang dekat tulisan yang warna MERAH tu.. Kemudian save dan try tengok menjadi atau tak..apa-apa korang tanya ok?