Cara membuat show / hide guest book dari atas

Ehm..Ehm.. Cek..Cek..1..2..3.. Hai sobat, apa kabar, Setelah lama kebingungan mau update post tutorial blogspot tentang akhirnya ketemu juga, yaitu Cara membuat show / hide guest book dari atas. Tapi yang kali ini beda loh, bukan yang saya share Disini . Kalau yang itu kan show / hide dari kanan. Kalau ini show / hidenya dari atas. Seperti punya saya. Kalau mau lihat Demonya lihat ke bagian kanan blog saya ada gambar Guest Book dan klik itu. Dan chat box pun keluar. Sobat ingin tau bagaimana cara membuatnya? Ikuti langkah - langkah di bawah ini:

1. Pastikan sobat sudah login pada blog sobat
2. Langsung beralih ke halaman Rancangan
3. Selanjutnya klik Tambah Gadget dan pilih HTML / Javascript
4. Kemudian pasang kode di bawah ini

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}

</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:#F5F5F5;">

<!-- Taruh kode chat box sobat Disini -->

</div>
</div>

<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>

</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; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png"  /></a>
</div> 

5. Simpan dan lihat hasilnya

Keterangan:

• Ganti tulisan  yang berwarna merah dengan kode chat box sobat
• Jika sobat ingin merubah garis pinggirnya ganti kode yang berwarna biru
• Jika sobat ingin merubah tab picturenya ganti kode yang berwarna pink
• Kode yang berwarna hijau adalah kode background nya
• Sobat tiadk tau kode warna? silahkan lihat Disini

Bagaimana? sudah jelas? bila masih ada pertanyaan silahkan berkomentar oke? Selamat Mencoba!!