Tips Mudah MEmbuat Chat box

hay para sobat sejati pembaca artikel ini...,pada kesempatan kali ini saya ingin berbagi tentang bagaimana cara agar kita dapat menggunakan chatbox...,mungkin bagi para blog mastter hal ini merupakan hal biasa ...,tapi bagi saya yang masih awam ini saya akan mencoba membagi sedikit
begini langkahnya.....................................
1.) Baca Doa
 2.) Sebelumnya, buat akun chatbox dulu, bisa menggunakan beberapa jasa chatbox gratisan seperti cbox, chatbox,atau jasa chatbox yang dikenal sobat

3.) Setelah itu daftar saja di salah satu jasa tersebut
4.) Ikuti saja perintah-perintahnya, setelah itu sobat akan mendapat kode Chatboxnya, contohnya kodenya seperti ini :

Contoh

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

5.) Setelah itu masuk ke akun Blogger anda
6.) Masuk ke Dashboard > Tata Letak > Tambah Gadget > Html/Javascript
6.) Masukkan kode ini di tempat konten kosong yang tersedia

Kode

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJWPLzZo_QGM9V5_3N3Bnu2hvAq3sGxsdTBXzhGgO5He_mTAOa3bfSDqlLcDesz8hcotJqcORb2Jx6uOjfi8yuaRve4rOsa0D-uuNM4UzWbdBTPEmmFxg_jURg_OTIFf8-BXoM6gYO3TM2/s1600/cbblue-2.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">

GANTI KODE INI DENGAN KODE CHATOBOX SOBAT !!!!

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

7.) Ganti tulisan ganti tulisan chatbox disini dengan kode chatbox yang didapatkan sobat tadi
8.) Setelah itu klik Simpan dan ihat hasilnya

Artikel terkait :