CARA MEMBUAT CHATBOX

09.21  caxbazz  



CARA MEMBUAT CHATBOX
  • Langkah Pertama yang kamu perlukan adalah membuka alamat website chatbox di www.cbox.ws. Setelah masuk ke halaman utama, Klik Sign Up. Kemudian isi data tersebut seperti alamat email, alamat blog dll. Jika sudah mengisi data tersebut dengan lengkap, klik Create my Cbox!


  • Setelah itu kamu akan masuk di Control Panel Home, Klik Look & Feel – Colours & Fonts

  • Lalu kamu akan masuk pada halaman untuk mengedit chatboxmu. Edit warna dan style chatboxmu sesuaikan dengan skin blogmu. Jika sudah selesai klik Apply. Setelah itu Klik Publish 

  • Jika sudah, maka anda akan masuk pada halaman CODE GENERATOR. Isikan alamat blog mu pada Your Website. Beri tanda centang pada Enable Quick Link. Isikan Security Tag sesuai kode yang tertera..

  • Pada Step 1 Where are you installing your chatbox? klik tanda panah ke bawah pilih Blogger / Blogspot.

  • Pada Step 2 Choose a variation : Klik tanda panah ke bawah pilih Inline (default).

  • Pada step 3 Get your code. Blog semua dan copy script tersebut.

  • Sekarang kamu log in pada bloggermu. Setelah masuk, Klik Rancangan, kemudian Elemen Laman. Klik Tambah Gadget. Setelah muncul jendela baru, pilih HTML/Javascript klik tanda tambah. Kemudian Isikan Kode ini :
<!-- left hidden chatbox by http://29101996.blogspot.com/ START -->
<style>
#hcl {
position:fixed;
top:50px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

<script chat kamu> taruh sini script kamu
di bawah ini contoh punya gue:
<!-- 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://www4.cbox.ws/box/?boxid=3924026&amp;boxtag=n9kpmp&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#000000 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=3924026&amp;boxtag=n9kpmp&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX -->


chatbox kamu pasang di tengah yg berwarna merah
 
<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://29101996.blogspot.com/2010/06/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[close]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- left hidden chatbox by http://29101996.blogspot.com/ END -->