Pada Postingan ini yaitu membuat buku tamu bisa dikatakan keren karena sebelumnya ada yang menanyakan tutorial ini,langsung saja
1. Siapkan kode Buku tamu Chat anda.
2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript
3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian
1. Siapkan kode Buku tamu Chat anda.
2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript
3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian
<script>simpan dan anda lihat hasilnya.
$(document).ready(function() {
//select all the a tag with name equal to syam
$('a[name=syam]').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 moveHeight = $(document).height();
var moveWidth = $(window).width();
//Set heigth and width to move to fill up the whole screen
$('#move').css({'width':moveWidth,'height':moveHeight});
//transition effect
$('#move').fadeIn(500);
$('#move').fadeTo("slow",0.5);
//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(1000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#move').hide();
$('.window').hide();
});
//if move is clicked
$('#move').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#move {
position:absolute;
left:0;
top:0;
z-index:5000;
background-color:#000;
display:none;
}
#house .window {
position:fixed;
left:0;
top:0;
width:330px;
height:479px;
display:none;
z-index:9999;
padding:0px 100px 0px 0px;
}
#house #shoutmix {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBr2pwmbKEU_g2TntZrRJzf_HN9cUNcKHcQ4YD2WN1jhcpuCL63vJouadAANF61TZU0dRD5srMDGJPIVCAn9P5qjQ2XMQzw5qJuOrUyV-_JZSVUQikxHvARK8WelJ-i9whhr4YxCwau9J5/) no-repeat 0 0 transparent;
width:330px;
height:479px;
padding:83px 0px 0px 0px;
}
#closed {
padding:2px 0 0 0;
}
</style>
<ul><div style='display:scroll; position:fixed; top:130px; right:3px;'>
<a href="#shoutmix" name="syam"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhablHjyAGyFVKPG_XSZeN438UBZ-ISolGeiuTOt9f0EurJtIuFWYgyw4DYGOv71wTRwsr3arxcMhtVrsPtNUHlVzCZQSsEfKzx6LRLlZchwPpHGvJh_vwWmzX6UfaiawRbszzb84_sAXg/s128/template_tamu.gif" width="34" height="125" /></a>
</div>
</ul>
<div id="house">
<!-- Start Shoutmix -->
<center>
<div id="shoutmix" class="window">
Masukan kode buku tamu disini
<div id="closed"><input type="button" value="Close Here" class="close" /></div>
</div></center></div><!-- End Shoutmix -->
<div id="move"></div>
<!-- End of Shoutmix light effect -->
Posted by
Anonymous
