Tips membuat buku tamu show/hide dari atas blog

Tips kali ini kita akan membahas tentang tips membuat buku tamu ketika tombol di klik maka buku tamu akan keluar dari atas ke bawah. Contohnya seperti gambar di atas. Nah langsung saja kita mebuatnya.

• LOG IN/SIGN IN seperti biasanya

• Trus pilih RANCANGAN > ELEMEN  LAMAN > TAMBAH GADGET dan cari HTML/JavaScript.

• Masukkan kode script di bawah ini kedalam KONTEN HTML/JavaScript.

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:50px;
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;">


MASUKKAN KODE SCRIPT BUKU TAMU DISINI


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i1099.photobucket.com/albums/g381/tentuya/btn_close.png" alt="close" title="Klik disini untuk keluar dari shoutbox/buku tamu" /></a></div>
<font size="1"><center><b><a href="http://www.shareapasaja.co.cc/2012/01/tips-membuat-buku-tamu-showhide-dari.html"target=_blank"><div style="color: #ffffff;">
<span ><b>GET THIS WIDGET</b></span></div></a></b></center></font>

</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:100px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://i1099.photobucket.com/albums/g381/tentuya/Shoutboxshareapasaja.png" alt="kode" title="Klik untuk membuka SHOUTBOX" cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="105px" width="35px"/></a>
</div>

Ket.
- Yang berwarna MERAH diganti dengan kode shoutbox/buku tamu teman - teman
- Yang berwarna BIRU itu adalah gambar tombol dan gambar silang(close). bisa di rubah dengan gambar yang teman - teman inginkan.

• Dan simpan. Lihat hasilnya, Keren kan ??

Semoga bermanfaat yah.