.::CARA MENYEMBUNYIKAN BUKU TAMU (CHAT BOX/SHOUT BOX)::.

Sebenarnya ada beberapa alasan sehingga  para blogger menyembunyikan buku tamunya... Tapi secara umum yakni agar tampilan blog simple dan tidak terlalu banyak memakan tempat... ??Oleh karena itu, mengapa chat box maupun shout box pada umumnya di tempatkan tersembunyi di bagian sudut blog yang mudah dilihat oleh pengunjung...

Langsung saja gan di bawah ini saya berikan 2 script untuk menyembunyikan chat box maupun shout box, yang satu dengan menggunakan knop atau tombol yang membuka ke samping saat di klik dan yang satunya lagi dengan cara open close.

Berikut scriptnya:

1.Dengan menggunakan tipe buka tutup ke samping (knop):

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini
 
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

2.Dengan menggunakan tipe Open Close, scriptnya yakni:

<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:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup boss ]</b></a></div>

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini


</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i51.tinypic.com/2meeej8.gif"/>
</a>
</div>

Good Luck....??!