Tutorial Ajax Float Shoutbox

Example

Hey, nak tahu tuto nie pasal ape? Act, tuto nie pasal shoutbox. Mesti korang dah bosan kan kalau tengok shoutbox korang kat area sidebar gadget tu jer? Tuto nie akan meletakkan shoutbox korang kat belah atas blog korang ( right corner ), kalau korang ikut steps nie dengn betul. Perkara paling penting yang korang perlu ada adalah SHOUTBOX.

 Copy

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br>
<a class='linkopacity' href='http://wanhazel.blogspot.com/2010/07/tutorial-ajax-float-lebih-cepat-nak.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Get Shoutbox AJAX float'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />


<!-- 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: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 #wanhazelshoutbox {

background:url(Url Background Shoutbox) no-repeat 0 0 transparent;

width:425px;

height:460px;

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>

SHOUTBOX ( CODE )

</center>
<!-- End ShoutMix -->

<div id="author"></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-->


</div>







FUNGSI WARNA-WARNA
Hijau > Code shoutbox ( log in di SHOUTBOX)
Merah > Url Icon Shoutbox
Biru > Url Background Shoutbox




THEN.. 
1. Go to dashboard> design> page elements> add gadjet> HTML/Javascript.
2. Paste code yang korang copy pastu save ! DONE !

NOTE : Pastikan shoutbox nye width= 261, height= 380



2 comments:

Aerol Hafiezi said...
This comment has been removed by a blog administrator.
roborobot said...
This comment has been removed by the author.