Cara membuat Chat Box Floating

By: Bimo Prakoso on 7:58 PM

Share it Please

Tweet

      Saya membuat postingan ini karena ada salah satu pengunjung Bimo Prakoso Blogger yang menanyakan cara membuat Chat Box Floating. Mungkin anda sudah tahu apa kegunaan Chat Box, Chat Box adalah gadget yang dapat membantu pegunjung berkomentar secara mudah. Silahkan anda lihat bagaimana cara membuat Chat Box Floating.  Sebelum anda membuat Chat Box anda harus mempunyai akun Chat box, anda bisa menggunakan chatbox atau shoutmix. Untuk membuat akunnya anda bisa search di google.

1. Kamu harus Masuk/Login dulu ke Blog Kamu
2. Kamu pilih Rancangan,
3. Kamu pilih Tambah Gadget,
4. Kemudian kamu pilih HTML/JavaScript,
5. Dan kamu salin kode dibawah ini :

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

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9QmYGJkfr-lm9I7PWVvPe2naBlbUz56cOG-on1LK-Ev7o_a_J1p6KiLjfXW1mlyDN9hyphenhyphen73bR7dpoUZKx9pVKdUnN2PAlp0dCOZ8mCf74f6DhMrgr4f60PeDIa871cmfHZBGXIlv-aBZ4/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</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">

***Masukan Kode ShoutMix Atau ChatBox Kamu Disini***

<div style="text-align:right">
<a href="">
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



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

Keterangan: Tulisan berwarna Hijau adalah tempan kamu masukan code ShoutMix Atau ChatBox kamu. Yang berwarna merah diatas adalah kode warna body tempan untuk ShoutMix Atau ChatBox kamu. Dan Warna Biru muda adalah warna gambar untuk tombol keluar masuk link gambarnya bisa anda ganti dengan link yang anda mau. dan Yang saya blok dengan warna kuning tua adalah tebal garis tepinya bisa di ubah angkanya px nya si tetap.

Di bawah ini saya tambahkan tabs untuk tombol Chat Box Floating


http://i365.photobucket.com/albums/oo98/gondrezt/Green%20Blog/tabs2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijYPxsmULHKJrEvllKHJzdPxLDeF5nVvpnW2NfXnKxEyOzV-DR-IDqhHQQV7kJ2ay1bSshhFOFNLrlemM3-83-oUeRgsfn0T19MrlQKr2mV5uczz9qsrjQtHG1_YuLt1z5wHzrV8QAOP_P/s1600/cbgreen.png

http://i968.photobucket.com/albums/ae169/antonius_boys/gambar/Chatboxhijau.png






https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURb-JS5yrUdb6xNQKTAbmE4hgmeg91QJvVR8H1Cx7deLyYCizq9Fish_lpO5xjM_NHP6JK3HVO9UfIbuF1GeEBC3GewoMWRUnkSFmAW_UTHxIa9k4WpuQMUAER292HCbVxEmPXdAWTlhy/s800/Untitled-1.png


Semoga bermanfaat :).