Membuat Widget Chat Box Di Blog

Kali ini saya akan berbagi cara membuat Chat Box dengan aplikasi CBOX. Chat Box atau Guest Box atau sebagainya adalah fasilitas untuk kita chatting dengan teman di dunia maya atau dengan teman Blogger khususnya. Manfaat lainya adalah agar alamat Blogspot kita dapat diketahui teman blogger dapat menyebar atau bahkan terkenal. Lumayan, buat bantu-bantu agar blogspot kita rame. Salah satu situs chat box adalah CBOX, tak perlu basa-basi lagi mari kita mulai:


1. Masuk ke situs cbox, http://www.cbox.ws/
2. Lanjut, pilih sign up tentunya untuk buat akun.

3. Pada tahap sign up, silakan isi dengan lengkap. cbox name isi dengan keinginan sobat, email address isikan alamat email sobat, password isikan tanpa diketahui orang lain (mesti lah,hha), website isikan alamat blogspot/web tujuan sobat, language pilih bahasa yang sobat mengerti, style pilih backround yang anda suka, jangan lupa centang terms and conditions, lanjut klik "create my cbox".

 4. Cbox sobat berhasil dibuat.

 5. Masuk ke yahoo dan periksa mail sobat, pasti ada mail dari cbox. Baca mail dari cbox dan klik link dari cbox untuk dapat login ke control panel cbox

6. Setelah link tersebut diklik maka sobat akan masuk ke control panel cbox. Lalu sobat lakukan proses login.

7. Clik menu Publish dan clik "Copy to Clipboard"

8. Langkah terakhir, masuk ke akun blogger sobat dan pilih "Tata Letak". Tentukan dimana cbox akan disimpan. Klik "Tambahkan gadget", pilih HTML/JavaScript dan paste-kan kode HTML dari cbox tadi.

<!!---------cbox-----------!!>
<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('https://lh5.googleusercontent.com/-Va-YSpnQ1Tw/Uo2VHOSLxyI/AAAAAAAAAWk/gMY04AmJ86U/w27-h109-no/cbox.png') no-repeat;
}

.gbcontent {
float:left;
border:3px ridge yellow;
-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: black; 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>
<!-- 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://www6.cbox.ws/box/?boxid=759618&amp;boxtag=gsn0lf&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-759618" style="border:yellow 3px ridge;" id="cboxmain6-759618"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=759618&amp;boxtag=gsn0lf&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-759618" style="border:yellow 3px ridge;border-top:0px" id="cboxform6-759618"></iframe></div>
</div><!-- END CBOX -->

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</center></div></div></!!---------cbox-----------!!>

Nb:

• Sisipkan kode berwarna Biru di kode Chat Box yg anda copy tadi seperti contoh diatas
• Tulisan yang Miring Putih bisa anda ganti sesuai gambar selera anda

Selesai, sobat sekarang bisa chat dengan teman blog menggunakan cbox.

"Terima kasih sudah membaca artikel Tutorial : Membuat Widget Chat Box Di Blog. Anda bisa bookmark halaman ini dengan URL https://henry-dunanz.blogspot.com/2013/11/membuat-widget-chat-box-di-blog.html. Jangan lupa klik salah satu tombol dibawah ini."