Cara Membuat Buku Tamu Show/Hide dari Atas

Kali ini saya akan membagi tips dan trik "Cara Membuat Buku Tamu Show/Hide dari Atas".  Gak Pake Lama langsung aja Dach...

1. Login blogger
2. Rancangan, Tambah Gadget,  Html/javascript
3. Dan Simpan kode berikut  : 

Here Is The Code

<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 #999; background: #000; -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 2px 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:#000;"> <!-- Simpan Kode cbox atau shoutmix nya disini --> </div> </div> <br /> <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFp1pCdD_avG3ZK_IgG3KSbPBJ0TCm_RDjeY7XL03TfQR4SWvlhn5ifDKDfICxc-j2bqHC01oU3LeIE2Iceo8WrWEndojYjYMEGjQL2g7_fhGQS23Vj1udvb0XAiuWSSZJKbsv1MYZ3t1m/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div> </div></div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.top = (-200-at.offsetWidth).toString() + "px"; </script> <center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>
Pada Kolom textarea di atas ada kata 
<!-- Simpan Kode cbox atau shoutmix nya disini --> (tepatnya di tengah)
Kalian Bisa Taruh Kode Shoutmix/ Cbox Kamu Di
 Kata <!-- Simpan Kode cbox atau shoutmix nya disini -->

CTRL + C UNTUK COPY DAN CTRL + A UNTUK SELECT ALL

Catatan:Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/GUESTBOOK.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i763.photobucket.com/albums/xx277/gberandal/celoteh%20galang/CHATBOX.png"  /></a></div>

Sudah itu saja yang yang bsa saya sampaikan, sekian dan terima kasih...

Credits:Celoteh Galang