Chat Box Melayang

Hai, ada yang mau cbox-nya melayang? Hah? Melayang? Iya, melayang.. Seperti ini nih contohnya

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

Sumber : http://fae-sa-hyun.blogspot.co.id/

Kita mulai dari buka akun blogger 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGq2Rh66vTFLZYTqDgtHB1I9OYAPDeiFVEFv8rAMKXM1S1ag4Iny_AiaWTwa2K6fpqTM6D9CtX05eCjmSiySIl-zDRRVaCnnf1IPGRB2p0bxRexEJwV-bZdtbvjLYPm0dVg3iz6SRwlPHO/s1600/background13.png);
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

Okehh, kalau sudah disave yaa...

Credit : Ratih

---

Terima kasih kerana baca entry ini, jangan lupa datang lagi

---