cara membuat chat box di blog

Kali ini saya kan membuat chat box atau lebih enak dikenal chatingan..Ok langsung saja yah.. pertama kita harus daftar dlu di Cbox.klik Daftar untuk mendaftar
setelah selasai mendaftar copy kan kode cbox anda di (<!-- Script Chatbox -->) kemudian save dan lihat hasilnya.
<!-- right hidden chatbox by  http://ariefradcliffe.blogspot.com/  START -->
<style>
#hcl {
position:fixed;
top:60px;
left:3px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:120px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcTQ7E4ul-Jln3kiJBEYHvZ86osww8ut34V3AtLz72cueER9EOTvgcEC05SB20V3v1_12j03unjIoqSyJHZooDwq5FEW7DuFPPfL9EI7qepggevt42xXtPmfMuEE_sjVAepCvZ-keGUCrU/s1600/cbred.png') no-repeat;
}
.hclcontent {
float:left;
border:6px solid #B40404;
background:#F7F8E0;
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 Chatbox -->


<br />
Mau seperti ini?<br />
Click disini--->
<a href=" http://ariefradcliffe.blogspot.com/ ">
Tutorial Blog


<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="float:right">
<a href="javascript:showHidehcl()">
[Hide]
</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>
<!-- right hidden chatbox by  http://ariefradcliffe.blogspot.com/  END -->



Sedikit Keterangan dari diatas :
  ~ Tulisan berwarna hijau : adalah script yang digunakan dalam chatbox/shoutbox. jika belum punya akun shoutbox bisa lihat cara membuatnya di Cara Membuat Chatbox Shoutmix Pada Blog Atau bisa mendaftar di http://www.cbox.ws/ juga bisa lihat caranya di Cara Mendaftar Chatbox Untuk Blog di Cbox. Caranya tinggal hapus dan ganti dengan script shoutmix yang sudah dibuat. Disini juga bisa anda isi dengan yang lain seperti gambar atau adsense.
  ~ Tulisan berwarna biru : adalah gambar yang digunakan dalam chatbox buka tutup berikut contoh gambar yang lain jika ingin mengganti gambarnya.

cb-blue2
url gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ldNNqtH13581DvFJFn9Sn336WB_JAOAky-jfghuBUFvcTli8lr0-NoXEeV6A0qWLn4_IO-fw68ClEVD8IDFPfRPqymFVWRZkYNk6FF1THqBrd1QjcCw2hhnfg6D2QHcNnziIcVOxwJBx/s1600/cbblue-2.png

cb-blue
url gambar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLbbGMOga0R-bM7v8uc3M2iGZ8j0JrLRgiRURnqtwujLFRf9PiSnyQQuQk1xL6tFwkfjJgrSS8yPIQFai1aFU00Ga90pnlfvntMpU9tSGSGwOcmeMuhi1Ncvtho0FGtTX2ap7CsE2cp3r/s1600/cbblue.png

cb-green
url gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhT5VqSKG0BXKIwJmPf8rVWUO9V_xfBIpLWU3xhw7_9nrXE0CRA1h0BNEFEWDuegAaPynb11J7Sc21-kUXbw52iYTYSjG6VJT3j8QmWF_FAqQ9tt_mIR51Gdj4B3Hsfy0WX8-9gnaeh3V/s1600/cbgreen.png

cb-yellow
url gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJHHkon13o38_U_PI34NY4FUor0bs6YgRuqKm4f3qoH7iGgbzcbBuTwlM4sj9AFulmIRw1LlRtVyTvgLhjTnGYuNYe2f0WHM_nDUbn9jra1EJrZLcMZxf9IQIicKaWSRmDRsIAhnunbtq/s1600/cbyellow.png

cb-yellow
url gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcTQ7E4ul-Jln3kiJBEYHvZ86osww8ut34V3AtLz72cueER9EOTvgcEC05SB20V3v1_12j03unjIoqSyJHZooDwq5FEW7DuFPPfL9EI7qepggevt42xXtPmfMuEE_sjVAepCvZ-keGUCrU/s1600/cbred.png

  ~ Tulisan berwarna orange : adalah ukuran-ukuran pada chatbox tersebut seperti top : jarak chatbox dengan paling atas blog. height : tinggi chatbox, width : lebar chatbox, border : ukuran border (garis tepi) chatbox, border solid : warna border, background : warna background chatbox. Anda juga bisa melihat kode-kode warna yang anda inginkan di  Kode Warna.

By jogoyitan

Komentar

Postingan populer dari blog ini

Shortcut keyboard macromedia flash 8

pengertian dan fungsi action script

Cara Membuat Kalender Menggunakan PHP