Cara Menyembunyikan "Buku Tamu" (GuessBook)

Bagi Rekan-rekan Blogger yang blognya sudah terlalu banyak pernak-pernik dan kesulitan untuk menambah widget baru lagi, padahal sangat bermanfaat untuk blog, ini ada cara menyembunyikan Buku tamu atau shoutbox seperti tampilan pada kanan pojok blog ini, bila ada pengunjung yang mengkliknya maka buku tamunya akan terbuka. Smart dan indah, lumayankan dari pada berantakan dan membuat tampilan blog jadi amburadul. Oke ini dia caranya Sembunyikan shotbox atau Buku Tamunya seperti ini.

•  Login ke Blogger Account Anda, pilih "Layout" kemudian "Page Elements",
• Klik "Add a Gadget" boleh di element manasaja, pilihlah "HTML/JavaScript",
• Copy code berikut dan paste ke Notepad:

<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://i581.photobucket.com/albums/ss258/daenkrhapy/BT.jpg') 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">

<!-- Ganti ini dengan kode buku tamu Anda -->

<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>

Sebagai Contoh Saya akan Ganti

<!-- Ganti ini dengan kode buku tamu Anda -->  dengan buku tamu saya :

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www3.cbox.ws/box/?boxid=3308488&amp;boxtag=vkcat5&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3308488" style="border:#000000 1px solid;" id="cboxmain3-3308488"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www3.cbox.ws/box/?boxid=3308488&amp;boxtag=vkcat5&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3308488" style="border:#000000 1px solid;border-top:0px" id="cboxform3-3308488"></iframe></div>

</div>

<!-- END CBOX -->

• selanjutnya Sobat juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah jadi 30px atau 20px, terserah Anda.
• Atau Anda Juga Mau Rubah Gambar http://i581.photobucket.com/albums/ss258/daenkrhapy/BT.jpg  sesuai selera, silahkan bikin dulu dengan Photoshop atau corelDRAW, Lalu simpan di photobucket dan gantilah gambar tersebut sesuai alamat penyimpanan.
• Jangan Lupa disimpan

Sumber :daenkblog.blogspot.com