Cara Membuat Buku Tamu "Autohide"

Setelah kemarin saya menjelaskan tentang cara membuat widget melayang (Buku Tamu). Sekarang saya akan menjelaskan cara membuat buku tamu yang autohide seperti yang ada di blog ini.
Ikuti langkah langkah berikut:


1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:117px;
width:50px;
float:left;
cursor:pointer;
background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #E0E0E0;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 47-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 ShoutMix - http://www.shoutmix.com -->

<iframe title="pahingjepara" src="http://www6.shoutmix.com/?pahingjepara" width="200" height="400" frameborder="0" scrolling="auto">

<a href="http://www6.shoutmix.com/?pahingjepara">View shoutbox</a>

</iframe>

<br /><a href="http://catatancuss.blogspot.com/" title="Mau Membuat Yang Seperti Ini..???">Klik Aja Ini</a><br />

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

<!-- End ShoutMix -->

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Keterangan :

1. Ganti kode yang berwarna biru dengan kode Shoutmix  anda.
2. Jika ingin merubah desain buku tamu, perhatikan kode yang berwarna merah. Berikut penjelasannya 

top:50px; (untuk merubah ketinggian buku tamu, bisa diubah dengan 40px atau sesuai kebutuhan) 

height:117px; width:50px; (untuk merubah tinggi dan lebar design yang selalu muncul, ganti ukuran sesuai dengan design baru) 

background:url('http://sites.google.com/site/pahingdesign/images/tabs-paper-cuss-Clip.png') no-repeat; (sesuaikan dengan alamat URL, tempat gambar/design baru disimpan) 

border:2px solid #E0E0E0; (Untuk merubah ukuran dan warna border atau garis keliling buku tamu)
background:#F5F5F5; (Untuk merubah Warna Background Buku Tamu

Note: Untuk merubah  gambar gunakan format .PNG Transparan

Nah semoga berhasil..Ditunggu komentarnya..

Sumber: http://www.catatancuss.co.cc/