Cara pasang 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:

1. Silahkan anda masuk ke dasbor anda
2. kemudian pilih rancangan 
3. klik tambah gadget - pilih HTML / Javascript
4. Kemudian Copy Kode Script dibawah ini
5. 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>
<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://sangasiji.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 border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRPEf3fslH7zo2UkBPnpKongnrXm0N-AC_vUsJiNNT0lFM41BSuasIxzjQuFTfhuauWeJaCrY9pbsVxUAx0QX46idQeslis9A61hsMUH0Cnv9s3Tk9iD6Sh9dtFhB44AViTqVd6acTXQSW/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>

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcwxz41_BB6_x7YyJ4bkdy-HL3YEdYfBOjxe3566enn0Up6KuKKXqJQVZfAqNIP4Gv9NJ7jPz_xMH96BvPSYZD88WzFTINiRkVgL1vMpoTbj9aLrg7B3G_DPGVXeunWHCxUAjh8WbfIbdC/h120/Anim+Cbox.gif"  /></a>
</div>

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

Posted in: