Cara Membuat Chat Box Melayang

Museun Sosig? Hallo Chingu ^.^
Oh ya Neira Request Chat Box kaya aku... Padahal baru tadi sore (eh, kapan ya?) bikin jadi melayang kaya gitu lohh..

Chingu mau Chat Box kalian jadi kayak greeting image tadi? Okehh.. Cekidot Chingu!


Kita mulai dari buka akun blogger chingu ya... Dan pilih Tata Letak nya. Next, chingu scroll sampai paling bawah dan ketemu tulisan "Tambahkan Gadget" . Click dan tunggu sampai keluar sebuah kotak. Nah, kan ada beberapa macam pilihan ya? Sekarang Chingu pilih yang "HTML/JavaScript". Dan tunggu sampai keluar dua buah box di atas dan di bawah. Sekarang Chingu ngisi kotak yang bawah, soalnya yang atas untuk judul (tapi, kita gak pakai judul ya).
isi kotak yang bawah adalah seperti berikut

<style>
#chatme{
position:fixed; top:5px; left:5px;
padding-top:5px;padding-bottom:17px;
text-align:center;
height:20px; width:95px;
overflow:hidden;
border:3px Dashed #F9B5CC;
color:#888;
border-radius:40px;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
background: url(URL IMG);
z-index:999;
}
#chatmelive{
padding-top:10px;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
} #chatme:hover {
border:3px dotted pink; padding:5px; height:450px; width:280px;
border-radius:40px;
}
</style>

<div id="chatme">
<center>
<img src="ICON CHAT" style="background:none;border:none;padding-top:0px;" /></center>
<div id="chatmelive">
KODE CBOX</div>

NB:

•  Orange: URL Image Icon Chat kalian
• Merah: Kode Chat Box Milik Kalian
• Biru: URL Background

Okehh, kalau sudah disave yaa...


Babay pada tutorial berikutnya ^^ Jangan lupa komentar loh yaaa Chingu ><

---

Yuk! Berikan komentar Kalian dan Follow Blog Sa Hyun ^^

---