Cara Pasang Buku Tamu Stylish

Berawal dari requestan salah seorang rekanan blog, dan diikuti oleh beberapa yang lainnya, akhirnya saya terinspirasi untuk menertbitkan tutosial pemasangan buku tamu seperti yang ada diblog ini (Bagi yang belum mengetahui model buku tamu blog ini, silahkan klik gambar berlatar hitam dengan tulisan buku tamu disamping), atau lihat gambar dibawah ini:

sudah paham buku tamu seperti apa yang dimaksud ?
jika iya maka pemasangan bagi yang berminat dapat segera dimulai. Berikut langkah-langkahnya:

1. masuk ke blogger anda
2. pilih menu rancangan (lay out)
3. klik tambah gadget (added gadget) ditempat yang anda inginkan
4. pilih HTML/JavaScript
5. masukkan kode dibawah ini:

<!-- Start Shoutbox light effect by UmarAzmarMF -->

<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 #UmarAzmarMFshoutbox {

background:url(http://i1088.photobucket.com/albums/i328/boytropic/FRANKENSTEIN-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="#UmarAzmarMFshoutbox" name="modal"><img src="http://i1088.photobucket.com/albums/i328/boytropic/FrankensteinCbox.png" border="0" width="158" height="58" /></a> </center> </ul>

<script style="text/javascript" src="http://h1.ripway.com/tropicboy/TOCcategory.js"></script>
<div id="wadah">

<!-- Start Shoutbox -->

<div id="UmarAzmarMFshoutbox" class="window">
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Close ]</b></a></div>


<-- LETAKKAN KODE BUKUTAMU ANDA DISINI -->


<div id="tutupan"><input type="button" value="Close" class="close" />
<script style="text/javascript" src="http://h1.ripway.com/tropicboy/TOCcategory.js"></script>
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}

#hidden_gb2 {

display:none;

border:2px solid #e4b5c5;

-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#FFFFFF;

padding:10px;

padding-top:0px;

}

</style>

<div class="gb_fixed">

<table id="hidden_gb2" cellpadding="0" cellspacing="0">

<tr><td>

</td></tr></table></div>

</div>

<script src="http://z33s.googlecode.com/files/Shoutz33sEfect.js"></script>

<div style="z-index:+5" class="gb_fixed">

</div>

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

<div id="semah"></div></div>

<!-- End of Shoutbox light effect by UmarAzmarMF -->

ubahsuaikan:
LETAKKAN KODE BUKUTAMU ANDA DITEMPAT YANG TELAH DISEDIAKAN