Cara Memasang Chat Box Melayang

Posted by : Arief Hilman Nugraha Sunday, January 13, 2013

Chat box sangat bermanfaat di blog kita, untuk berkomunikasi antar pengunjung atau pemilik blog . Selain itu chat box juga dapat mempercantik blog kita. Cara membuat chat box sangat mudah, dan mungkin sudah banyak yang mengetahuinya. Saya akan berbagi sekedar yang saya ketahui.

Caranya:
1. Rancangan
2. Tambah gadget
3. HTML/Java Script
4. Masukkan kode HTML berikut

<style type="text/css">
#nempel{position:fixed;top:65px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('http://lh5.ggpht.com/_xcD4JK_dIjU/Stq23DPOQUI/AAAAAAAADhQ/2imPnFpVUrA/d/floatnav.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid #A5BD51;background:#CCFFFF;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="128" src="http://www3.cbox.ws/box/?boxid=3349150&boxtag=vhd8g1&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3349150" style="border:#0036C8 1px solid;border-bottom:0px" id="cboxform3-3349150"></iframe></div>
<div><iframe frameborder="0" width="200" height="252" src="http://www3.cbox.ws/box/?boxid=3349150&boxtag=vhd8g1&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3349150" style="border:#0036C8 1px solid;" id="cboxmain3-3349150"></iframe></div>
</div>
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://ariefhunterz.blogspot.com" target="_blank">Widget by Blogger Tune-Up</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

5. Simpan

Keterangan yang warna merah diganti dengan java script chat box kalian...
untuk mendapatkan/merancang chat box lain kalian dapat mendapatkannya di www4.cbox.ws
lalu registrasi
demikian caranya, sangat simpel dan mudah kan...
selamat mencoba

Share This