You must enable Javascript in your browser to run or open this site.

Chatting box Bersembunyi

Kalian tau Chatting Box? Nah, ini Chatting box bersembunyi? Bagaimana caranya tuh? Dimana tuh? Nah, Chattingbox (Cbox, Shoutmix, atau Shoutbox) digolongkan sebagai chatting live yang bisa diletakan atau ditempelkan di website atau blog sobat. Jika sobat menggunakan blog, pasti pada umumnya Chattingbox diletakan di sidebar, footter, atau diheader menggunakan javacript sebagai pacuan. Nah, kalau yang ini beda. Chattingbox diletakan di samping scroll dan bersembunyi.


Caranya sebagai berikut.

- Buka blog dengan Pass da ID dan menuju ke Page Element

- Add gadget - Javascript - Masukan kode di bawah

- Copy paste kode dibawah

<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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHCl
EVcvY/tabs.png') 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">
!ISI CHATTINGBOX SOBAT DISINI!
<div style="text-align:right">

<a href="javascript:showHideGB()">
[CLOSE CHATTING BOX]
</a>
</div>

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

- Ok.

PERHATIAN : Kata yang bertuliskan http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png diganti sobat sesuai selera sobat. Setelah, itu kata yang bertuliskan !ISI CHATTINGBOX SOBAT DISINI! diganti kode Chattingbox sobat. Kode Putih adalah kecepatan lari Cbox saat dibuka.

Terimakasih yaa telah memperhatikan artikel ini. hehe selamat mencoba ya..

6 comments

  1. thanks gan , dapet ilmu lagi nich ..... pertamax ya ??? heheh

    BalasHapus
  2. Sama sama kawan.. semoga menikmati ini :)

    BalasHapus
  3. mas mau tanya, kalo ada halaman php yang mau di bikin kayak gitu gimana ya? maaf nanyanya yang aneh2 :D

    BalasHapus
  4. To DEWAPHOBIA : Maaf mas, saya tidak tahu bagaimana cara tampil di php. Saya cukup mahir di .js aja :)

    BalasHapus
  5. bolehkah saya minta bantuan, bagaimana caranya mengintegerasikan chatting berbasis jquery ke dalam website pribadi :) terima kasih

    BalasHapus
  6. maksudnya kode jquery gimana??? chatting box ini ke webstite pribadi, alamat[com]??? pada umunya semua website itu sama, pakai kode html head, html, body. Kalau website pribadi letakan saja kode di postingan ini diantara kode :
    <head>
    Letakan kode
    </head>

    BalasHapus