Cara Membuat Buku Tamu Tersembunyi

Membuat buku tamu tersembunyi seperti di blog saya ini ternyata sangat mudah lho.. 
saya juga dapet ilmu ini setelah browsing keliling google,, hehe,,,
saya jadikan posting disini hanya agar mempermudah saya jika saya ingin menggunakan ilmu ini lagi juga sekalian share buat sobat-sobat yang belum tahu.. ^^ 
ngomong-ngomong mau buat buku tamunya disebelah kanan atau kiri nih? atau mau ada dikanan dan di kiri,, hehe...
oke langsung saja kita mulai tahap-tahapnya...

1. Login ke blogger kamu
2. Kemudian pilih Rancangan kemudian pilih elemen laman
3. Tambah gadget pada elemen laman dan pilih HTML/JavaScript
4. Copy dan Paste Kode Dibawah ini kemudian Save dan lihat hasilnya.

Kode untuk buku tamu disebelah kanan :

<style type="text/css">
#gb{
position:fixed;
top:40px;
z-index:+500;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i1125.photobucket.com/albums/l598/dieza77/tabstamu2.png') no-repeat; }
.gbcontent{
float:left;
border:7px solid #A5BD51;
background:#F5F5F5;
padding:3px; }
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened; }
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
} </script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<-- Masukkan Kode Buku Tamu Anda Disini -->

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Kode untuk buku tamu disebelah kiri :

<!-- left hidden chatbox by http://dieza-eza.logspot.com START -->
<style> #hcl { position:fixed; top:50px; left:20px; z-index:+500; } * html #hcl {position:relative;}
.hcltab { height:200px; width:35px; float:left; cursor:pointer; background:url('http://i1125.photobucket.com/albums/l598/dieza77/thtabstamu2.png') no-repeat; }
.hclcontent { float:left; border:7px solid #A5BD51; background:#F5F5F5; padding:3px; }
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

<-- Masukkan Kode Buku Tamu Anda Disini -->

<br /> <div class="hc-credit"> <span style="float:left"> <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE --> </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div> <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script>
<!-- left hidden chatbox by http://dieza-eza.blogspot.com END -->'></div>

keterangan :

silahkan masukkan kode buku tamu yang anda dapat dari situs web resminya pada kolom 

<--masukkan kode buku tamu anda disini -->

dan untuk mengatur posisinya cukup anda ubah nilai yg saya beri warna hijau diatas

dan untuk mengubah yg lain-lainnya itu tinggal kreasi anda sendiri..

Good Luck ^_^

Daftar Isi [Tutup]