Chat BOX Melayang untuk BLOG

Cara membuat Chat BOX kyak di Blog ini >>

I. masuk ke blogger

II. langsung ke layout (tata letak)

III. tambah gadget atau HTML/JavaScript

IV. copy paste kode berikut..

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

</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">

Copas Kode cbox yang telah sobat buat, dan letakkan di sini

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

NOTE :

- yang warna hijau sobat ganti dengan gambar Url yang sobat ingin kan,, kalau menurut sobat sudah bagus, abaikan saja...

-yang warna merah, sobat copas cbox yang telah anda buat di www.cbox.ws, lihat gambar di bawah ini.. (sigp up dulu di cbox, lalu ambil codenya dari sana)

maka akan seperti ini :

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

</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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=706008&amp;boxtag=yq8msh&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-706008" style="border:#ababab 1px solid;" id="cboxmain7-706008"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=706008&amp;boxtag=yq8msh&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-706008" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-706008"></iframe></div>
</div>
<!-- END CBOX -->

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

V.  simpan / save..

beres dah.. bisa diatur posisi nya juga.