Membuat kotak chat tersembunyi

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul setelah diklik. Script yang digunakan pada kotak chatting tersebut adalah javascript. Javascript memang boleh menbuat script-script yang hebat dan kreatif.

ok...

1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bagian konten.

-------------------------------------------------------------------------------------------

<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>


SCRIPT CHATTING DI SINI (alamat url shoutmix atau shout box anda)


</iframe></center>
<a href="http://www.tutorialblogging.co.cc/2010/04/membuat-kotak-chatting-tersembunyi.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.

CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.

1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]>, kemudian copy-paste kode css berikut di atasnya.

---------------------------------------------------------------------------------------------
#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;}

-------------------------------------------------------------------------------

3. klik save..

selamat mencuba