Membuat Buku Tamu dengan Efek Show Hide

Buku tamu berfungsi untuk meninggalkan pesan dari pengunjung yang datang ke blog kita. Kita bisa memperoleh buku tamu dari chatbox, shoutbox (berbayar), dll. Selain itu ada juga beberapa cara kita menempatkan buku tamu pada halaman blog. Semuanya itu tergantung dari selera kita masing-masing. Biasanya ada yang menempatkan buku tamu pada sidebar dan footer, namun ada juga yang menempatkan buku tamunya di sudut blog "menyembunyikan buku tamu dengan efek slide". Kali ini kita akan membuat penempatan buku tamu dengan cara Show Hide. Jika penasaran ikuti langkahnya berikut ini:

1. Masuk ke Rancangan -- Elemen Laman
2. Tambahkan gadjet lalu pilih HTML/Javascript
3. Masukan kode di bawah ini:

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #00ff00;
-moz-box-shadow: -2px 2px 25px lime;
background:#000 no-repeat center;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url();">


<!-- Masukan Kode Cbox Anda -->

</div>
</div>
</div>
<br/>
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9w8VXTjoDfbt91oU2aDb34-bOlndNPsTsIL_V-SjSmREFZK5ykNbFzdJMCsVU3lvgDP66darmfYXEpvjOj4YwGwiZEvzwCTVl4LYTt1Oo-XgC4NMMwarL-7dsM7txY0LXVhlj_WBX_m0/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


<div style='display:scroll; position:fixed; top:80px; left:3px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif" /></a>
</div>

Keterangan:
- Anda dapat mengedit kode diatas untuk tampilan dan penempatan buku tamu

4. Masukan kode buku tamu anda pada kode diatas yang berwarna merah
5. Simpan gadjet dan lihat hasilnya

Selamat mancoba, semoga artikel ini bermanfaat!