Membuat Buku Tamu Tersembunyi atau Show Hide

Untuk membuat buku tamu Show Hide atau Buka Tutup silahkan langsung copas kode berikut:

<style type="text/css">
#at{
position:fixed;
right:500px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #FFF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 3px 5px 0px #f8f9b9;
}
</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: #FFF;">

GANTI TULISAN INI DENGAN KODE CHATBOX / SHOUTBOX ANDA

<br /><a href="javascript:void(0);"onclick="showHideAT()"/>Close</a>

</div>
</div></div></div>
<a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://lh6.googleusercontent.com/_UL5ewe73l5Q/TcUg2l0Gn0I/AAAAAAAAAc4/-D0P_lHOlZQ/GuestBook3.png" alt="Guest Book" title="Click here to open Guest Book" /></a>

Keterangan:

1. #FF0000 => Untuk memberikan warna border box / garis tepi, silahkan ganti sesuai selera.. Silahkan lihat disini Kode Warna
2. #FFF => Untuk memberikan latar box / background
3. GANTI TULISAN INI DENGAN KODE CHATBOX / SHOUTBOX ANDA => Silahkan hapus dan ganti dengan kode chatbox / shoutbox anda. Pembuatan chatbox / shoutbox buatan anak negri sebelumnya sudah pernah saya posting klik disini
4. https://lh6.googleusercontent.com/_UL5ewe73l5Q/TcUg2l0Gn0I/AAAAAAAAAc4/-D0P_lHOlZQ/GuestBook3.png => Gambar tombol Guest Book, anda dapat membiarkannya seperti itu atau merubahnya dengan gambar anda sendiri

Cara Pemasangan:

1. Masuk / Login blog
2. Pilih Rancangan >> Elemen Laman
3. Klik Tambah Gadget >> Pilih HTML / JavaScript >> Paste kode di atas pada Konten, untuk judul biarkan kosong.
4. Klik Simpan

Selesai semoga bermanfaat

Link to This Post:

http://jvccard.blogspot.com/2011/05/membuat-buku-tamu-tersembunyi-atau-show.html