Cara buat buku tamu show/hide dari atas

 Buku tamu merupakan sarana yang digunakan pengunjung untuk berkomunikasi dengan pemilik blogger atupun website, dengan demikian ada feedback atau tanggapan antara pengunjung dan blogger. berikut saya akan menjelaskan cara memasang buku tamu sederhana yang muncul dari atas. silahkan anda baca secara teliti langkah-langkah berikut:
Silahkan anda masuk ke dasbor anda
kemudian pilih rancangan
klik tambah gadget - pilih HTML / Javascript
Kemudian Copy Kode Script dibawah ini
Dan terakhir di save/simpan

<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>

<br />

<div id="at">

<div class="attab" onclick="showHideAT()">

</div>

<div class="atcontent">

<div align="center">

<div style="background: #000;">

<!--Pasang Kode Script Cbox Anda Disini -->

Get this <a href="http://kayaatausukses.blogspot.com/2012/05/cara-pasang-buku-tamu-showhide-dari.html" target="_blank"><blink>widget</blink></a>

</div>

</div>

<br />

<div align="right">

<a href="javascript:void(0);" onclick="showHideAT()"><img alt="close" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMjyKgJ_sjPfeBN5B4wwJrr7aVZC3uHZ8mG5307i93wSghEueielAVvRXhwK5Dcsmk3Fy2lNb7eiySZnVKn4y-MpYMDHh8cxBz1_QO0YwKCRbfK6EKqxz3AS0zN9Aa9cHSPrMtPAv9lhW_/s1600/close.png" 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>

<br />

<div style="display: scroll; position: fixed; right: 0px; top: 20px;">

<a href="javascript:void(0);" onclick="showHideAT()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggh3IkgBxhyEu-tVSqEguvsJazinabaiHV1bq4dr6gted0imHHMpTlLCLgr-XYbXpHAOzm2Zs2G3O3k-rcSoLRCQiqSWHclrGc_LqafcGN_bggNutghlg2YTRFp-nQ6gVihf0fKToPI0fw/h120/Anim+Cbox.gif" /></a>

</div>

Cukup mudah bukan tutorialnya........^_^
Silahkan anda berkreasi sendiri kawan, Sekian Terima Kasih...