Salam untuk sobat blogger kali ini saya akan memposting Cara Membuat Shoutbox Versi Ajax hehehe lagi2 shout box tapi ini shout box nya keren untuk digunakan
<!-- Start Ajax Popup Shoutbox by Ridho -->
<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});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//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 #ridhoshoutbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9rsDIA39jF9KOHrWyTjTbx6dg3xbKNXSkm5VkCmzZhuq9vuZ9qMqRgWR-7_1LB2JjqmOmMc24EjdIp04Uic7Uo_7cS4czmU_7dj9jqEzxlIhDTy9MDuK_wyWvpJvE-uBR5tx2sxJ0EJk/s1600/lightblack.PNG) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#ridhoshoutbox" name="modal"><img src="http://img.photobucket.com/albums/v486/mafiatrg/shoutboxtab.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="ridhoshoutbox" class="window">
<div id="author">
</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 by Ridho -->
6 komentar:
Mantap!! ajari aku buat ucapan selamat datang berjalan kaya punyamu bang...unik banget.
untuk merubah tulisannya dan warna dalamnya
gimana sob??
widget sama gadget sama gak.? mohon penjelasannya. thank
numpang Iklan gan.
Bahannya akibat seks BEBAS!!!, salah satunya penyakit kelamin HERPES .seperti apa selengkapnya Klik Obat Untuk Penyakit Herpes
Agen Pakan Lele murah Kecamatan Grabag Purworejo
Agen Pakan Lele murah Kecamatan Grabag Purworejo
Posting Komentar