Cara Membuat Kotak Chatting Tersembunyi

**VagaGemwart™.HT** Thu Jan 13, 2011 10:00 am

VagaGemwart™.HT: COMMANDER; Jumlah posting : 219
DIGITAL POINTS ( DIGI ) : 5798
REPUTASI : 17
Join date : 11.01.11
Age : 79
Lokasi : headquarters Gemwart™

Post n°1

Cara Membuat Kotak Chatting Tersembunyi

Post VagaGemwart™.HT Thu Jan 13, 2011 10:00 am

Cara membuat kotak chatting tersembunyi. Sebelumnya gua pernah membahas mengenai alternatif chatting bagi pengguna shoutmix. Kali ini gua akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin lo 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 bisa menciptakan script-script yang hebat dan kreatif.

Di posting ini lo akan mendapatkan tutorial blog mengenai cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.
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.

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 CHATTING DI SINI

[+]

[x]

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

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(https://2img.net/h/oi42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}

3. Simpan template.