Membuat Chat Box di Tesembunyi Blogger

Membuat Chat Box di Tesembunyi Blogger

Hallo sobat Blogger hari ini saya akan membahas tentang cara membuat Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Ok langsung saja ke Cara Membuat Chat Box di bawah, atas, kanan, kiri Blog :

• Login terlebih dahulu ke blog sobat
• Klick Design -> Pilih tata letak -> Tambah Gadget -> Pilih HTML/Java Script.

Copy Code di bawah ini setelah itu paste di HTML/Java Script .

Klik show untuk melihat

<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(http://petir-project.googlecode.com/files/zuaz-petir.gif)#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>

Keterangan :

• Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
• Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGH, dari bawah Bottom .
• Kode berwarna biru adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
• Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Keterangan : cara mendapatkan kode cbox sobat supaya bisa di atur sobat bisa ke sini : http://cbox.ws/ . Dan login terlebih dahulu, bagi yang belum punya akun bisa sigup , atur cbox sobat di Look & Feel di bagian Menu. setelah di atur tinggal sobat klick apply. dan sobat tinggal copy kodenya di Publish!.

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

• Setelah cara diatas sudah selesai sobat bisa memilih Tombol cbox sobat sendiri.
• Masih HTML/Java Script. Copy kode dibawah ini dan letakan di bawah kode diatas.

Klik show untuk melihat

<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/AVvXsEhOjv0FFnaWCQupgtYLAVYenN5WrSgtQEvEV1Q-Zog3QeZSblTyV8daxVBuUssTX46hL1OQ2rH6U3odzQN5beUfIrrHEkTsl1lqvSYBJKXlatn-ac6g41i-W7GXI16I40HdC6rHcYfZFn4/s1600/Bukutamu6.gif " alt="cbox" title="Buka Chat Book"/></a></div>

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera..!, sobat bisa memilih gambar tombol dengan kode di bawah ini.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan, Right untuk menempatkan tombol di sebelah kiri blog.

Bagi sobat yang ingin mengganti tombol Cbox bisa lihat kode nya Dibawah sini! :

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMAc_H2BLWlZCDAxwNCbVrEXi1YIcXN3uuKX57YcI3Wq3aoZGQPswDNecgXIXwbZt6nMUQ0bdTsuFLhZqJZ3YcRjzGRQtk_4VuhEAApbTXiqm-wa5WtUGTqy-Ls_92tC9QftLHaVGgHU/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZUl9v5XoTpNSiLupTdp9Qld-dTmfQEFpo5LqxGtaq48DLHsKbtXcWA6Tsn8qQwFGfbbHUReCsKyVu3vr75b7LuLlhLTSBTSnbdY2O-pVVBFAlOu6l5D8363KgiBckwUPEfmztKF37SR4/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGjoImt_3ZMxTH_0fjvO7nxL6V9GnWuNvdO2Xdq1e6QnTL8mIhNxPawEx2e5YXFcsM64d3BRBaugSoomRzUAcwzPgsDz3LRZhON8ysReJjW2QrSSnnD8yoW0MDG72GzSXsxwAIeNORKWI/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKX16o2K6cbfs2iti8LjAZvgvv5eThrRjfoAfNpZWo5owCeHmffjYJiJRKqRzOGitulsBqY8DkHN12rDcS9nFgw8617xVzjcot94F8y9qngLR-hLhYg5vHCFokXcMcjnevQFmhSlo3XQw/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdDR8KjfZO50r1Ry6CD1izCuk7QF-lA94TbtYUrRid_EKVIWZfJ3s0HyTDKcFEnkMBCJ6HdBuOJ5qld-UnoBhKNn5EjdcrEyg94kf19RiQHqxsUV05_S2pigI-WKb83PesqNMEn-aazY/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUSp9MCqt7UM_WtxrZ3toBSpq1WEoQEllMy_f0OoREBxNByqk3pCjE9o7GoKsvvsgKodOZSHFVsrTTKkV-XznqiOKdnUcEkN91YS4x9p71TRulqTGiKeQE8igcH8E9xJ75WZRdF_god94/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWwRfSHf-vVHyElqKO72N_RUI5wIEa7dCTCfXs_2wZN7-z-Z8UfeAGhKtaYNHuZfto0hwzNjXwXCnhg_zg90MXPz30bM49HiFpkVI_WbjH9xOIfX_0r8eswlue1o3SAAYUzyjSuuD1d8A/s1600/BukuTamu1.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjv0FFnaWCQupgtYLAVYenN5WrSgtQEvEV1Q-Zog3QeZSblTyV8daxVBuUssTX46hL1OQ2rH6U3odzQN5beUfIrrHEkTsl1lqvSYBJKXlatn-ac6g41i-W7GXI16I40HdC6rHcYfZFn4/s1600/Bukutamu6.gif

•  Klick Simpan / Save dan lihat hasilnya.