Cara Membuat Widget Chatbox Tersembunyi

Chatbox - atau yang lebih dikenal denganbuku tamu ini,merupakan salah satu media contact dengan admin,atau dengan yang lain.nah hal ini akan mempermudahkan kita untuk berdiskusi dan meyelesaikan masalah yang ada di blog / website tersebut.
seperti halnya dengan komentar ,widget ini dapat membuat anda mendapatkan pengunjung setia,setiap hari,karena fitur-fitur yang disediakan cukup mudah dan gampang.

Untuk cara membuatnya,cukup mengikuti langkah-langkah berikut :

pergi,ke situs penyedia layanan chatbox gratis, seperti Shoutbox Widget
lalu anda akan disediakan kode,yang akan anda gunakan untuk membuat widget tersebut.
simpan kodenya di notepad.
lalu pergi ke akun blogger
masuk ke tab menu rancangan >> elemen halaman,
tambahkan 1 widget
pilih html/javascript
lalu pastekan kode berikut :

<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:40px;
float:left;
cursor:pointer;
background:url('http://i1233.photobucket.com/albums/ff398/Proid321/Chatbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00FF00;
background:url('http://i1193.photobucket.com/albums/aa346/muhammadwali/star.gif')repeat;
padding:15px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<style></style> <script type="text/javascript"> function showHidehcl(){ var hcl = document.getElementById("hcl"); var w = hcl.offsetWidth; hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0); hcl.opened = !hcl.opened; } function movehcl(x0, xf){ var hcl = document.getElementById("hcl"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; hcl.style.left = x.toString() + "px"; if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);} } </script> <div id="hcl"> <div class="hclcontent">

"KODE CHATBOX ANDA,PASTEKAN DISINI"

<div style="text-align: right; font-size: 10px;">
           Widget by
           <a href="http://ea-xp.blogspot.com">
               Tutorial Belajar SEO,blogspot Lengkap
           </a>
       </div>

<div class="hc-credit"> <span style="float:left">  </span> <span style="float:right"> <a href="javascript:showHidehcl()"> </a> </span> </div> </div> <div onclick="showHidehcl()" class="hcltab"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script> </div>
<div style="text-align:right">
<a href="http://ea-xp.blogspot.com/2012/04/cara-membuat-widget-chatbox-atau.html">
[cara buat buku tamu tersembunyi]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>