Buku Tamu atau Chat Box Show-Hide

Show-hide adalah efek yang akan membuat buku tamu atau chat box muncul dengan klik dan tersembunyi lagi dengan klik pula. Kalo kamu tertarik memasang widget ini, silahkan masukkan kode berikut diHTML/Javascript blogmu.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SWNnuZZWZvYKB1srBNYQzhvzFLSdOKWRg8RP697XL-X70LetGAMOaks0VoJL4jRGYZIjg6lyFddZHUs7rk5ITENFuIPSXtUfHnzhmWvLHeRXFn3NQ6LNvAXCiSugJkCUosDQw_xo72zF/s320/tabs.png') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #666666;
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">


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id='cboxdiv' style='text-align: center; line-height: 0'>
<div><iframe allowtransparency='yes' frameborder='0' height='250' id='cboxmain7-646363' marginheight='2' marginwidth='2' name='cboxmain7-646363' scrolling='auto' src='http://www7.cbox.ws/box/?boxid=646363&amp;boxtag=h5pkv5&amp;sec=main' style='border:#ababab 1px solid;' width='500'/></div>
<div><iframe allowtransparency='yes' frameborder='0' height='75' id='cboxform7-646363' marginheight='2' marginwidth='2' name='cboxform7-646363' scrolling='no' src='http://www7.cbox.ws/box/?boxid=646363&amp;boxtag=h5pkv5&amp;sec=form' style='border:#ababab 1px solid;border-top:0px' width='500'/></div>
</div>
<!-- END CBOX -->

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Caranya :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kodenya di kotak yang di sediakan.
Klik Save Tambahan :
Ganti kode  orange dengan ketinggian yang diinginkan dari posisi atas halaman. Ganti kode yang berwara hijau dengan kode buku tamumu. Nah, yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , shoutbox, atau pada penyedia chatbox gratisan lainnya.