Mecha versi 2.6.4 sudah dirilis!

CSS3 Facebook Chatbox

Tabel Konten
  1. HTML 
  2. HTML 

HTML 

.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
  color:#333;
  width:200px; /* Chatbox width */
  border:1px solid #344150;
  border-bottom:none;
  background-color:white;
  position:fixed;
  right:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}

.chat-box > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:26px;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.chat-box > label {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#344150;
  color:white;
  font-weight:bold;
  padding:0 1em 1px;
}

.chat-box > label:before {content:attr(data-collapsed)}

.chat-box .chat-box-content {
  /* padding:10px; */
  display:none;
}

/* hover state */
.chat-box > input[type="checkbox"]:hover + label {background-color:#404D5A}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#212A35}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}

HTML 

<div class="chat-box">
    <input type="checkbox">
    <label data-expanded="Close Chatbox" data-collapsed="Open Chatbox"></label>
    <div class="chat-box-content">

        <!-- Kode buku tamu dsb... -->

    </div>
</div>

Lihat Demo

15 Komentar

Unknown

Jd pengen cepet2 ngeblog lagi :D lama gak main coding :D

Dixy

ooo...
iki checkbox tah...

Unknown

:-bd gpp ini ga ditutup??
<input type="checkbox">

Taufik Nurrohman

Kalau kita memakai HTML mentah atau memasukkan kodenya ke dalam formulir widget tidak apa-apa, tapi kalau memakai XHTML seperti template Blogger lebih baik ditutup seperti ini supaya tidak muncul pesan error:

<input type='checkbox' />

Unknown

owhh.. OK thanks mas.. :)

dhanyn10

tanya mas, chatbox yang saya pakai kan menggunakan iframe, kalo saya beri efek seperti yang ada di tutorial facebook likebox apa berarti saya hanya perlu memasukkan kode
class="framePreloader" id="framePreloader1">
class="framePreloader" id="framePreloader1">
ke kode bukui tamu tsb?sementara kode bawaan dari penyedia chatbox saya masukkan ke HTML. seperti itu kah?

dhanyn10

cara meletakkan kode html yang pertama gmn mas?
seperti diatasnya-atau dibawahnya apa...

Anonim

Mantab bener chatbox nya! Kelihatannya lebih ringan dari cbox biasa secara penampilan. :D

Kang Rian

mantapp gaan! , tinggal di edit dikit css nya .. amazing tuhh !! \o/ tepuk tangan buat kang taufik .. makasih yah kang

Unknown

Kang kalau untuk membatasi tinggi tampilan open chatboxnya bagaimana? soalnya ketika penuh ke atas, kolom untuk menutup (close chatbox) tidak bisa tampil. atau biar pas banyak chat melampaui batas, tampilan isi chat bisa discroll, dan kolom close chatboxnya tidak tenggelam ke atas
sebelum dan sesudahnya saya ucapkan Jazakumullah khairan katsira atas jawabannya!

Taufik Nurrohman

Pakai max-height:

.chat-box .chat-box-content {
max-height:400px;
overflow:auto;
display:none;
}

Unknown

Jazakumullah khairan katsira atas panduannya kang, blog saya sekarang jadi ada chat fbnya.. :D

Unknown

Saya chatboxnya pakai widget komentar fb kang, kalau supaya pas ada chat masuk, ada pemberitahuan seperti pemberitahuan ada komentar di blog akang ini bagaimana caranya kang? Syukran..!

Komentar telah ditutup.