Tulisan 5 (SIM 1)

Cara Membuat Floating CHATBOX

Oke kali ini saya sedikit akan share cara membuat floating chat. Caranya cukup mudah dan dengan adanya chatbox ini, para pengunjung blog anda dapat dengan mudah berkomentar atau memberikan kritik untuk kemajuan blog anda.

Hal hal yang perlu diperhatikan antara lain:

1. Mempunyai akun pada ChatBox.
2. Setelah ada membuat akun diatas kemudian log in ke blog anda
3. Masuk ke bagian Design / Rancangan
4. Kemudian Pilih Add Gadget / Tambah Gadget
5. Lalu pilih HTML / Javascript

Lalu masukkan Code di bawah ini :

<!-- Chatbox by faizadi --><br /> <style type="text/css"><br /> #gb{<br /> position:fixed;<br /> <span style="color: blue;"><b>top:50px;</b></span><br /> z-index:+1000;<br /> }<br /> * html #gb{position:relative;}<br /> <br /> .gbtab{<br /> height:100px;<br /> width:30px;<br /> float:left;<br /> cursor:pointer;<br /> background:url('<span style="color: purple;"><b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnNdtyoFNtN68xojepGxIPwQwZ4zR3cTqFbZlmVKrSCXg59by0hRibiNuXHtWlSC5t130_E6sotwWArutHfE7qo-qzkmetnaRzrOOn0kT3kiNLkG4E2LeWKEPcEWfwm1kd4fc-Bh3d_YTL/s100/cbblack.png</b></span>') no-repeat;<br /> }<br /> <br /> .gbcontent{<br /> float:left;<br /> border:<span style="color: violet;"><b>2px</b></span> solid <span style="color: green;"><b>#180600</b></span>;<br /> background:<span style="color: orange;"><b>#F5F5F5</b></span>;<br /> padding:10px;<br /> }<br /> </style><br /> <br /> <script type="text/javascript"><br /> function showHideGB(){<br /> var gb = document.getElementById("gb");<br /> var w = gb.offsetWidth;<br /> gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br /> gb.opened = !gb.opened;<br /> }<br /> <br /> function moveGB(x0, xf){<br /> var gb = document.getElementById("gb");<br /> var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br /> var dir = xf>x0 ? 1 : -1;<br /> var x = x0 + dx * dir;<br /> gb.style.right = x.toString() + "px";<br /> if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br /> }<br /> </script><br /> <br /> <div id="gb"><br /> <br /> <div class="gbtab" onclick="showHideGB()"> </div><br /> <br /> <div class="gbcontent"><br /> <br /> <span style="color: red;"><b> Masukan Kode ChatBox Kamu Disini !</b></span><br /> <br /> <div style="text-align:right"><br /> <b><font color='black' face='verdana' size='1'><a href='http://faizadi.blogspot.com' target='blank_' title='faiz adi wicaksono'>2011 &#169; SEPI SAUPISAU</a></font></b> | <a href="javascript:showHideGB()"><br /> <img rel='nofollow' src='http://www.norwoodeurope.eu/img/pcCloseButton.png'/><br /> </a><br /> </div><br /> </div><br /> <br /> <script type="text/javascript"><br /> var gb = document.getElementById("gb");<br /> gb.style.right = (30-gb.offsetWidth).toString() + "px";<br /> </script></div><br /> <!-- End Chatbox script -->

Copy code diatas dengan pilih select all dan tekan Ctrl + C.
Code lengkapnya bisa di lihat dibawah:

<!-- Chatbox by faizadi -->
<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/AVvXsEhnNdtyoFNtN68xojepGxIPwQwZ4zR3cTqFbZlmVKrSCXg59by0hRibiNuXHtWlSC5t130_E6sotwWArutHfE7qo-qzkmetnaRzrOOn0kT3kiNLkG4E2LeWKEPcEWfwm1kd4fc-Bh3d_YTL/s100/cbblack.png') no-repeat;
}

.gbcontent{
float:left;
border:2px solid #180600;
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 ChatBox Kamu Disini !

<div style="text-align:right">
<b><font color='black' face='verdana' size='1'><a href='http://faizadi.blogspot.com' target='blank_' title='faiz adi wicaksono'>2011 &#169; SEPI SAUPISAU</a></font></b> | <a href="javascript:showHideGB()">
<img rel='nofollow' src='http://www.norwoodeurope.eu/img/pcCloseButton.png'/>
</a>
</div>
</div>

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

6. Sebelum save perhatikan langkah-langkah dibawah.

Untuk memodifikasinya anda dapat mengubah :
1. Tombol tabs untuk memunculkan Chatbox (lihat warna ungu pada code) dapat direplace dengan link berikut:
• Link 1
• Link 2
• Link 3
• Link 4
Klik link untuk view. Anda juga dapat membuatnya sendiri, upload lalu copy link urlnya paste pada teks yg berwarna ungu.

2. Perhatikan warna merah pada code diatas anda wajib menggantinya dengan code shoutmix/chatbox anda. Jika kurang jelas anda dapat comment dibawah saya akan senang hati membantu.

3. Untuk jarak dari layar atas sampai ke tabs perhatikan warna biru = top:50px; jika anda mengubahnya menjadi 100px maka tabs chatbox anda akan semakin ke bawah. Dapat disesuaikan dengan tampilan blog anda.

4. Selanjutnya warna pink merupakan border dari floating chatbox. Jika ingin garis tepi/border yang lebih besar anda dapat menambahkannya menjadi 3px, 4px, dst.

5. Warna hijau merupakan warna border. Anda dapat ganti code warnanya sesuai tema blog.

6. Warna kuning merupakan warna background tempat chatbox anda. Sesuaikan dengan background chatbox/shoutmix.

Jika sudah selesai semua silahkan klik SAVE. Anda dapat memodifikasi code tersebut sesuai dengan keinginan anda. Info diatas tidak harus dijadikan patokan bahwa hanya itu yang dapat di ubah.
Terima kasih.