10 Langkah Menyembunyikan Kotak Chatting/Chatbox

Mau masang kotak chatting / chatbox tapi takut  bikin blog keliatan penuh dan sumpek?? Disimbunyiin aja! Dengan begitu yang keliatan cuman tombol kecil di sidebar blog, begitu tombol itu di klik, keluar deh chatboxnya! Mau tau caranya? Oke, ayo kita buat chatbox tersembunyi!

1. Bikin chatbox dulu. Udah tau belum caranya? Baca artikel ini klo belum!
2. Login blogger
3. Dari dasbor pilih rancangan, elemen laman
4. Pilih tambah gadget, terus HTML/JavaScript
5. Bagian judul ga usah diisi. Biarin aja tanpa judul. Bagian konten diisi kode warna biruberikut :

<script type="text/javascript">
function showHidechat(){
var chat = document.getElementById("chat");
var w = chat.offsetWidth;
chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
chat.opened = !chat.opened;
}
function movechat(x0, xf){
var chat = document.getElementById("chat");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
chat.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
}
</script>
<div id="chat">
<div class="chat-click" onclick="showHidechat()"> </div>
<div class="chatbox">
<center>

TARUH KODE CHATBOXMU DI SINI

</iframe></center>
<a href="http://udahtaubelum.blogspot.com/2010/06/10-langkah-menyembunyikan-kotak.html" title="Pasang widget chatting seperti ini di blog anda" target="_blank">[+]</a>
<span style="float:right">
<a href="javascript:showHidechat()">
[x]
</a></span>
</div></div>

<script>
var chat = document.getElementById("chat");
chat.style.right = (30-chat.offsetWidth).toString() + "px";
</script>

6. Simpan gadget
7. Sekarang kita edit HTML-nya. Dari rancangan, pilih Edit HTML
8. Cari kode ]]></b:skin>  Inget, biar cepet ketemu tekan ctrl + f
9. Taruh kode berikut diatas kode ]]></b:skin>

#chat{position:fixed; top:25px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}

10. Simpan template dan liat hasilnya

Selamat makan jagung bakar ... eh selamat mencoba maksudnya!

Artikel Terkait