Pasang ChatBox On Klik di blogspot atau blogger.com

Nih buat temen-temen blogger yang penasaran ama chatbox yang melayang dipojok kanan atas layar pc... Kaya chatbox yang terlihat diblog ini.

Disamping blog kelihatan keren tapi dengan chatbox on klik, blog kita tidak akan kehabisan layar browser sehingga blog terlihat nyaman dan rapi.

Ok lah langsung aja dari pada kelama'an baca ceramah gak penting gue... :D

LangkahNya :

1.daftar di cbox.com atau penyedia layanan chatbox gratis, n gue saranin yg gratis aja wkwkwk :D


2.kustom chatboxmu sesuai keinginan, dari mulai warna, ukuran, text, date, dan lain2 sesuai keinginan... N gue saranin yang serasi dan cocok dengan blog kamu.

3.copy dan paste kodemu pada gadgets html/javascrip blogmu, terserah dimana aja letaknya.

Misal :

<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="350" src="http://www5.cbox.ws/box/?boxid=615256&boxtag=wsssrp&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#E1771E 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=615256&boxtag=wsssrp&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#E1771E 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>

4.Masukan text css dan javascript dibawah ini tepat diatasnya.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:38px;
float:left;
cursor:pointer;
background:url('http://lh5.ggpht.com/_noownWFsWHg/SyV8sQmWeJI/AAAAAAAAAGc/qV08fcllTUU/aiShoutBox.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #e1771e;
background:#888888;
padding:0px;
}
</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">

5.masukin javascript dibawah ini tepat dibawahnya.

</div>


</div>

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

6.save gadgets html/javascript kamu dan lihat hasilnya.

Semoga bisa membantu :Dv