Trik membuat Buku Tamu Autohide

Auto hide Shoutbox adalah efek yang akan membuat buku tamu muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ), hanya beda sedikit dengan buku tamu show / hide. Sobat yang tertarik memasang widget ini, silahkan masukkan kode berikut diHTML/Javascript blog sobat.

Copy kodenya :

<style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDtR56v3uTq_dyXuEjxLMTkLx7xxEuaumUmR_F_IfxQbiCvOzlpOtLhNDxaabBtq18QYlRn2bXJ-O4-8oiIDRo5hlkXPaFdOfiFzfYlpsRNWNOqxeg-YYZvpl1dKGm60eM4bv99qHdIBK/)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #fff; background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll; } </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.bottom = 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:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;"> Strip kode cbox sobat </div> </div> <br /> <div align="right"> <a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div> </div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script>

Caranya :

Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
Masukkan kodenya di kotak yang di sediakan.
Klik Save

Tambahan :

Hapus tulisan "Strip Kode cbox sobat" dan masukkan kode buku tamu milik sobat.  Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Penulis: Hasan GMC

Judul Trik membuat Buku Tamu Autohide
Jika ingin membantu memperkenalkan kepada teman atau (copy-paste) artikel ini, sertakan link dibawah ini sebagai sumbernya : <a href="http://tipsntrik-hasan.blogspot.com/2013/03/trik-membuat-buku-tamu-autohide.html" target="_blank">Trik membuat Buku Tamu Autohide</a>

Facebook

Twitter

Google+

RSS

Menu Blog