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

  • abang ichal

    ditunggu...

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

  • Taufik Nurrohman

    :yaya:

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