Membuat Hidden ChatBox

Posted by Blackpepper at 12.20 Read our previous post

Hallo bloggers! :D ketemu lagi sama black :P

Uda pada tau kan chatbox itu apa?

ini yang namanya chatbox

Yup! Chatbox ato yang sering disebut buku tamu adalah salah satu alat komunikasi antar blogger. Selain untuk melengkapi halaman blog kita, chatbox juga bisa meningkatkan traffic blog kita. Jadi misalnya kita berkunjung ke blog orang lain, dan kita ninggalin pesan di blog mereka, so kemungkinan si empunya blog akan melihat blog kita lewat URL yang kita tinggalin (tapi jangan lupa ngasih URL blog kita ya ;)). Gak cuma pemilik blog itu sendiri, pengunjung lain pun ada kemungkinan ngliat pesan kita dan mengunjungi blog kita.

Tapi, chatbox yang nggak di hidden bakal menuh-menuhin blog kita sehingga kesannya blog kita itu sumpek, makanya lebih baik kita masang hidden chatbox aja.

Well, gak usah banyak cingcong deh, nih black bagi tau cara memasang hidden chatbox :)

   1.  Udah pasti login blog kita dulu
   2.  Trus bikin akun chatbox di cbox.ws. Yang udah punya akun chatbox dimana aja
       (nggak harus di cbox.ws) langsung login aja. Tapi black saranin bikin akun chatbox
        di cbox.ws aja, soalnya gratis dan gampang :P

 

   3.  Setelah itu, design cbox-mu dengan mengklik “look and feel"

 

4             4.  Kalo uda selesai ndesainnya, klik Publish, trus copy kode cbox kamu,
        dan pastekan di notepad (atau semacamnya)

5       5.  Well, balik ke akun blog kita lagi. Klik Tata Letak

6       6.  Klik Tambah Gadget è HTML/Javascript

7       7.  Copy kode berikut:

<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('http://i42.tinypic.com/mll9w6.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"><!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="298" src="http://www5.cbox.ws/box/?boxid=702864&amp;boxtag=j6tsa7&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-702864" style="border: 0px solid;" id="cboxmain5-702864"></iframe></div>

<div><iframe frameborder="0" width="200" height="82" src="http://www5.cbox.ws/box/?boxid=702864&amp;boxtag=j6tsa7&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-702864" style="border: 0px solid;border-top:0px" id="cboxform5-702864"></iframe></div>

</div>

<!-- END CBOX -->

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

<a href="http://missblackpepper13.blogspot.com">

[Blackpepper :)]

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

[Tutup :)]

</a>

</div>

</div>

<script type="text/javascript">

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

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

</script></div>

•              Kode yang warnanya kuning, bisa kalian ganti sesuai selera kalian :)
•           Sedangkan kode yang merah, ganti dengan kode cbox kalian

8       8.  Simpan deh tuh template :D

            Mudah kan? :) Okedeh, selamat mencoba! :D

            Makasih udah mampir di blognya black, jangan lupa ninggalin komen ya :D