Cara Menyembunyikan Buku Tamu (ShoutBox)

Cara Sembunyikan Buku Tamu - Cara Buat Buku tamu Melayang
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:

<br /><style type="text/css"><br />#gb{<br />position:fixed;<br />top:50px;<br />z-index:+1000;<br />}<br />* html #gb{position:relative;}<br />.gbtab{<br />height:100px;<br />width:30px;<br />float:left;<br />cursor:pointer;<br />background:url('http://i581.photobucket.com/albums/ss258/daenkrhapy/BT.jpg') no-repeat;<br />}<br />.gbcontent{<br />float:left;<br />border:2px solid #A5BD51;<br />background:#F5F5F5;<br />padding:10px;<br />}<br /></style><br /><script type="text/javascript"><br />function showHideGB(){<br />var gb = document.getElementById("gb");<br />var w = gb.offsetWidth;<br />gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br />gb.opened = !gb.opened;<br />}<br />function moveGB(x0, xf){<br />var gb = document.getElementById("gb");<br />var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br />var dir = xf>x0 ? 1 : -1;<br />var x = x0 + dx * dir;<br />gb.style.right = x.toString() + "px";<br />if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br />}<br /></script><br /><div id="gb"><br /><div class="gbtab" onclick="showHideGB()"> </div><br /><div class="gbcontent"><br /><!-- Ganti ini dengan kode buku tamu Anda --><br /><blink><br /><font size="2"><a href="http://daenkblog.blogspot.com/2009/08/cara-sembunyikan-shoutbox-buku-tamu.html">^÷•db•÷^</a></blink><br /><div style="text-align:right"><br /><a href="javascript:showHideGB()"><br />[close]<br /></a><br /></div><br /></div><br /></div><br /><script type="text/javascript"><br />var gb = document.getElementById("gb");<br />gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /></script><br />


Sebagai Contoh Saya akan Ganti
dengan buku tamu saya :

<!-- Start http://shoutbox.widget.me HTML Code -->
<iframe title="Shoutbox" src="http://shoutbox.widget.me/window.html?uid=rrkec" width="160" height="400" frameborder="0" scrolling="auto"></iframe>
<br /><a href="http://shoutbox.widget.me" title="Get your own free chat widget!">Shoutbox</a> by <a href="http://ngai.cc" title="Ngai Chun Cheung">ngai.cc</a><br />
<!-- End http://shoutbox.widget.me HTML Code -->

1. 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.
2. 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.
3. Jangan Lupa disimpan