Cara Membuat Chatbox Keren Melayang Disebelah Kanan Blog

Kali ini saya akan memberi cara membuat Chat Box melayang disisi blog, bagi yang senang mengedit blog atau menghias blog. Guna Chat Box adalah cara mudah untuk mengobrol tanpa perlu lewat komentar jadi membuat anda menjadi mudah mengobrol. Bagi yang berminat Langsung saja YuK!!!!! Check it out!!!





Caranya:

1. Login di blogger
2. Menuju ke Layout (Tata Letak)
3. Klik Add Gadget, Pilih Edit Html
4. Copy kode di bawah 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 -->

Copas kode cbox yang telah kamu buat disini

<!-- END CBOX -->

</div>

</div>

<script type="text/javascript">

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

kemudian tulisan berwarna biru Copas CBox yang sudah anda buat

Hasilnya 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=489734&amp;boxtag=251z6g&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-489734" style="border:#ababab 1px solid;" id="cboxmain7-489734"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=489734&amp;boxtag=251z6g&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-489734" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-489734"></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>

   5. Klik Simpan

Selesai,,,,, Jika Bermanfaat tolong di like jika ada kata atau kode yang salah harap komennya insyaallah saya akan memperbaikinya!!!