Show Hiden Buku Tamu di Samping Kanan Blog

Cara dan gaya buku tamu seperti ini banyak digunakan oleh para bloger, yang salah satu alasannya untuk memperirit penempatan pada halaman blog, juga untuk memudahkan para mengunjung untuk menulis dan mengisi buku tamu tanpa harus membuka halaman lagi.

Pada awalnya, saya rasa cara seperti ini dapat menambah beban berat loading halaman blog pas kita membukanya. 

Kalau kita membuat satu halaman lagi untuk buku tamu, berarti kita harus membuka dan menunggu loading lagi untuk nyampai di buku tamu / guestbook..! Ya.. sama saja..! Mending kita selipin saja di samping kanan blog, simpel kan..?!

Baik, kita coba ikuti langkah dan cara-caranya:

• Login dengan akun blogger kita
• Masuk ke rancangan
• Tambah gadget
• Pilih HTML / Javascript
• Masukan script di bawah:

<!-- Start Guestbook -->
<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTf9FGWj47WTEHmpROjf90trGeNV6bITbMm82rAxytpBLqik5nniZgRcbz3tEi_gJu_-226twmL_QwO8P3ZfgeFJVCGDaCU6IlQSuO-DGRiLVp18XS-HsOUkbxmraYCfl0VDFPR7AZLiR/s1600/Guest.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#efefef;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

CODE SCRIPT BUKU TAMU / CBOX KITA TEMPATKAN DI SINI!

<div class="hc-credit">
<span style="float:left">
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- End Guestbook -->

• Selesai..