Menyembunyikan (Hide) Buku Tamu/Guest Book Blogger

Lagi-lagi tutorial kali ini adalah tentang blog. Dan lagi-lagi yang menjadi objek atau narasumbernya adalah blog saya sendiri (hehehehe...)

Saya yakin sobat semua sangat menganggap buku tamu itu hal yang perlu, bahkan wajib untuk sebuah blog, hehehe. Bukan sekedar untuk gaya-gayaan sih, tapi buku tamu ini mempererat hubungan kita dengan blogger yang lain, sharing informasi, sharing kendala dan dengan guestbook ini si pemilik blog mendapatkan banyak masukan bermanfaat dari blogger-blogger lain yang bertaburan indah di dunia maya (ceilah).

Satu lagi yang saya suka dari buku tamu ini yaitu ajang maki memaki hehehe (don't try it at home). Okeh deh jangan banyak mukadimah, mending langsung aja nih saya share guest book keren saya yang bisa di hide dan unhide hehehe, Sedooootttt gaaaannn.....

<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://lh4.ggpht.com/_NSa8I94a3wg/TJHDAQiJqSI/AAAAAAAAAGo/0LukH8E000Y/s800/tabs_asep.png') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #cd8c3d;
background:#050505;
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 ShoutMix - http://www.shoutmix.com --><iframe title="river2762" src="http://www.shoutmix.com/?river2762" width="100%" height="400"
frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?river2762">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com"
title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->

<br /><a href="http://rizukinote.blogspot.com/" title="">Jangan Lupa Follow/Comment Yah..!!!
</a><br />
<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[close]

</a>
</div>
</div>

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

Sip dah! Kode dah dapat, selanjutnya mau diapain ya?

• Login blog anda seperti biasa sehingga anda masuk ke dasbor
• Klik Rancangan
• Edit Tata Letak
• Tambah Gadget > Html
• Tinggal Copaz (Copy & Paste) tuh kode diatas
• Simpan dan Selesai deh.

Note: Ganti tulisan warna merah diatas dengan link shoutmix atau chatbox anda sendiri.