Membuat Buku Tamu Tersembunyi

Saya pikir, posting Membuat Blockquote Cantik merupakan posting terakhir saya di bulan Maret ini. Tapi, saya sempatkan untuk kembali menulis posting. Kali ini kita akan mencoba membuat Buku Tamu Tersembunyi, jadi ketika tombol buku tamu di klik, buku tamu milik anda akan muncul. Dan saat sedang muncul, bila anda klik kembali tombol buku tamu anda, buku tamu anda akan kembali tersembunyi. Jika anda masih bingung dengan maksud dari kalimat yang saya sampaikan di atas, coba lihat screenshotnya di sini atau di sini.

Menarik bukan? Jika anda tertarik untuk menambahkannya pada blog anda, silakan ikuti langkah-langkah berikut.

1. Pertama, anda harus menuju "tata letak" setelah anda login pada akun blogger anda.
2. Klik "add gadget", pilih "HTML/Javascript"
3. Copy kode berikut dan paste kedalam elemen yang akan ditambakhkan tadi.

<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/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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 dengan kode buku tamu anda -->

<br />
Mau punya buku tamu seperti ini?<br />
Klik di
<a href="http://ryansalim.blogspot.com/2010/03/membuat-buku-tamu-tersembunyi.html">
sini</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

[+] KET: Pada kode <!-- Ganti dengan kode buku tamu anda --> di atas, ganti dengan kode buku tamu yang anda miliki.

4. Klik simpan, dan lihat hasilnya.