Membuat Buku Tamu Melayang Versi Jquery

Halo gan??
posting ini ane akan nge-teset tutor ini. Soalnya ini dapet dari Tetangga sebelah. Kalo' di cobak sih unik hasil nya. Ok dah mari kita liat cara nya

1. Log in ke Blog
2. Rancangan -> Elemen Laman -> Tambah Gadget -> HTML/Java Script
3. Pastekan kode berikut

<!-- Start Shoutbox light effect by Han -->
<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 semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').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();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #kid53 {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>

<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>

<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

SIMPAN SCRIPT Cbox KALIAN DISINI

<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Han-->
</div>

4. Simpan

Edit : 
SIMPAN SCRIPT Cbox KALIAN DISINI
YANG LAINNYA BISA DI UTAK ATIK SENDIRI
Sumber : http://yazidpromdn.blogspot.com/

Tolong dibaca nih gan !

Kamu sedang membaca artikel tentang Membuat Buku Tamu Melayang Versi Jquery dan kamu bisa menemukan artikel Membuat Buku Tamu Melayang Versi Jquery ini dengan url http://faishalpromadiun.blogspot.com/2012/05/membuat-buku-tamu-melayang-versi-jquery.html, kamu boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Buku Tamu Melayang Versi Jquery ini sangat bermanfaat bagi banyak orang, namun jangan lupa untuk meletakkan link Membuat Buku Tamu Melayang Versi Jquery sebagai sumbernya.

Artikel terkait :