tutorials : pop up shoutbox

hello!!
elin dapat request daripada aisyah

aisyah :cam ne nk wat pop up shoutbox cm ko punyer tu..
tolong ajarkan

biar elin ajar step by step


:62: dashboard > design > add gadget > html

:62: copy code bawah ni then paste kat ruangan html

<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 />
<!-- 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:100;

top:67;

width:240px;

height:289px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #shoutbox {

background:url('url background');


width:253px;

height:258px;

padding:4px 0 30px 3px; }


#closesb {

padding:2px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#shoutbox" name="modal"><img src="http://i1127.photobucket.com/albums/l640/loveovelvelo1/talk-1.png" border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="shoutbox" class="window">

<!-- Begin ShoutMix - http://www.shoutmix.com --><center>


kod shoutbox korang

<!-- End ShoutMix -->

<div id="author">

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

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

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

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

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


:62: save dan lihat hasilnya..

merah: gantikan dgn code shoutbox korang
pink : korang bloeh ubah sesuka hati korang
biru :korang letak url background/icon

-------------------------------------------
leave your comment :)
-------------------------------------------

4 comments:

  1. shoutbox ni ape?? sorry org baru nk belajar :3

    ReplyDelete
    Replies
    1. okeyh ... nampak tak kat sebelah tuh ad tempat untuk chatting...nampak kan?? tu lah cbox...

      Delete

orang yang last comment kat blog nye,
orang tu yang paling cute <3