Cara Membuat ChatBox Auto Hide

Berikut cara membuat Chatbox Auto Hide.
Langkah pertama, anda harus Sign Up dulu ke cbox.ws atau sejenisnya, untuk mendapatkan  kode scriptnya.

Kemudian login ke www.blogger.com,

Kemudian klik Rancangan dan klik Elemen Laman,

Klik Tambah Gadget kemudian pilih HTML/JavaScript.

Copy kode diatas dan pastekan kode tersebut pada kolom  HTML/JavaScript dengan menggunakan mode Edit HTML

<style type="text/css">
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}

.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>

<div><iframe src="http://www7.cbox.ws/box/?boxid=537945&amp;boxtag=wezw0a&amp;sec=main" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxmain7-537945" style="border:#ababab 1px solid;" id="cboxmain7-537945" frameborder="0" height="305" scrolling="auto" width="200"></iframe></div>
<div><iframe src="http://www7.cbox.ws/box/?boxid=537945&amp;boxtag=wezw0a&amp;sec=form" marginheight="2" marginwidth="2" allowtransparency="yes" name="cboxform7-537945" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-537945" frameborder="0" height="75" scrolling="no" width="200"></iframe></div>
</div>
 <br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://siniput.blogspot.com/2012/09/cara-membuat-chatbox-auto-hide.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>
 

untuk warna merah, diganti dengan kode script ChatBox anda,kemudian klik simpan.

Artikel Terkait: