Cara Menyembunyikan Chatbox

 
     Jujur aja banyak banget bloger yang memosting artikel seperti ini=>Cara Membuat Chatbox Tersembuyi, Cara Menyembunyikan Buku Tamu Chatbox/Shoutbox dll. Tapi kebetulan temen ane naya gimana ya cara menyembuyikan chatbox.. nah kebetulan ni hari ane blon kepikiran pengen posting apa'n yaudah deh posting tips bloging kaya gini ajah hihi^^

Okok langsung aje kita ke TKP..
Nah pada pagi ini ane pengen kasih pada agan2 Script buat menyembunyikan  chat box atau shout box, perbadaan'ya yang satu mengunakan knop/ tombol yang membuka ke'samping ketika di kik N yang kedua engan cara Open Close..

CEKIDOT====>

Berikut Script

1.===>Dengan menggunakan tipe buka tutup ke samping (knop):

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

2.===>Dengan menggunakan tipe Open Close, scriptn'y dibawah ini:

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:1px solid #004831;
background:#00fcefff;
padding:5px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Tutup boss ]</b></a></div>

copy SCRIPT CHAT BOX / SHOUT BOX anda di sini


</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://i51.tinypic.com/2meeej8.gif"/>
</a>
</div>


Nah ketika sudah agan cuma perlu tambah HTML/javascript tp nanti jgn kasih judul yahh
mudah kan...

Smoga bermanfaat yah....^^