Hello Pengunjung Oktri Blog, Pada Postingan sebelumnya Cara Membuat Buku Tamu Model Sliding,
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.

Anda Bisa Daftar Disini

2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript



3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian

<script>
$(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/AVvXsEhDcuVADNQqlGTklI1zvncIOrsUDuU6qGG5NiVTtuSv6laFnog4wbxMG1J7jRK8JTAGKR_utKEdeMdRMMlvxjjFx0We2P0tTrUQN2xW-KAsTBC7gKBnH_oXA1wSGfxVWzYOA_GvYoMYtzK4/) 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/AVvXsEheEA8VtuD8tnZJYK6FoI2IfsyMAgKJ1xlYSma9e9EELBptv09h4JyKzdZqOLHBK1PEXAacApZPkNOG4VsizDvJeN9nxoNXjGtIAOp09KYq5jBhWSa3vRRFbYFHX3_DluazHdmQf46rGBM/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 -->

Ganti Tulisan Masukan kode buku tamu disini Dengan html Shoumix anda
simpan dan anda lihat hasilnya.