Buku Tamu "Autohide"

Buku tamu bisa dikatakan merupakan kebutuhan vital pada sebuah blog, tapi terkadang dengan menabahkan widget buku tamu pada blog, akan menggangu tampilan blog itu sendiri, maka jalan satu - satunya adalah dengan menyembunyikan buku tamu kita dengan tampilan auto hide seperti yang dibuat pada blog pahing . buku tamu autohide yang ada di blog pahing, termasuk unik tidak seperti buku tamu autohide yang banyak beredar di internet terutama dalam segi designnya. berikut cara membuatnya termasuk cara merubah designnya.

1. Copas (copy Paste kode berikut, lalu pasang pada Widget HTML/Javascript baru.

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

2. Jika tidak ingin merubah desain dan tampilan, Ganti kode yang berwarna hijau dengan kode Shoutmix  anda, Bagi yang belum memiliki kode shoutmix, silakan membuat account gratis di TKP. Lalu Save Widget baru ini tanpa memberi nama, dan letakkan sembarang pada Layout Blog.
3. 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: Gunakan merubah  gambar gunakan format .PNG Transparan

Silakan Berekperimen dengan buku tamu Autohidenya, jika ada pertanyaan seputar pemasangan buku tamu Autohide silakan isi pada kotak komentar