Cara Membuat Chat Box (versi 2)

Jumat, 05 Juli 2013

Cara Membuat Chat Box - Chat box adalah sebuah tempat untuk saling berkomunikasi yang terdapat di dalam blogger atau website. Apa manfaat memasang chat box di blogger atau website? manfaatnya ada banyak salah satunya adalah saling berbagi informasi sesama pengguna blogger. Apakah anda ingin memasang di blogger atau website anda? ikuti langkah-langkah dibawah ini jika anda ingin memasangnya.

1. Masuk ke blogger.
2. Pilih tata letak.
3. Pilih tambahkan.
4. Cari html/javascript.
5. Salin kode dibawah ini.

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7aqbmSRsmvhVY7fS-CGTPpWw7GS59hl2RyV4VrqXFSxEIY_W-D1qPEpTbaIu7f1cLbXAf2z9J32nI2z7gOqG-raq23yNv0R_SCTRF3YsKBxzCO2KGk_3bFeDk93Kt6H7KfTuIlyz4Jfv/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
Strip kode cbox sobat
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

6. Simpan.
Catatan:
1. Tulisan yang di tandai dengan warna merah, anda bisa ganti dengan alamat gambar yang anda inginkan.
2. Tulisan yang di tandai dengan warna putih, anda bisa ganti jarak chat box yang anda inginkan.
3. Tulisan yang di tandai dengan warna hijau, anda bisa ganti atau ubah letak chat box yang anda inginkan.

Cara Membuat Tombol Chat Box
1. Masuk ke blogger.
2. Pilih tata letak.
3. Pilih tambahkan.
4. Pilih html/javascript.
5. Salin kode dibawah ini.

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT3mpG86l5oYiNVduyrRyhfliVivN10uFJKiEpzW0OnzP8__ElB1V87Dx9__CcS2hhsF25QEH6vkGAhhRXs8c9hkJOYuY2jJKTjdkdlEl1QGs0yfSSGyWfLQyjLI-52lj1UuOgcPRA9h3k/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

6. Simpan.
Catatan:
1. Tulisan yang di tandai dengan warna oranye, anda bisa ubah jarak chat box yang anda inginkan.
2. Tulisan yang di tandai dengan warna pink, anda bisa ganti dengan posisi yang anda inginkan seperti, top, bottom dan left.
3. Tulisan yang di tandai dengan warna ungu, anda bisa ganti dengan url gambar anda.