CSS3 Facebook Chatbox
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>
Labels: CSS, Eksperimen, Potongan
15 Comments:
Jd pengen cepet2 ngeblog lagi :D lama gak main coding :D
ooo...
iki checkbox tah...
ditunggu...
:-bd gpp ini ga ditutup??
<input type="checkbox">
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' />
owhh.. OK thanks mas.. :)
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?
:yaya:
cara meletakkan kode html yang pertama gmn mas?
seperti diatasnya-atau dibawahnya apa...
Mantab bener chatbox nya! Kelihatannya lebih ringan dari cbox biasa secara penampilan. :D
mantapp gaan! , tinggal di edit dikit css nya .. amazing tuhh !! \o/ tepuk tangan buat kang taufik .. makasih yah kang
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!
Pakai max-height:
.chat-box .chat-box-content {
max-height:400px;
overflow:auto;
display:none;
}
Jazakumullah khairan katsira atas panduannya kang, blog saya sekarang jadi ada chat fbnya.. :D
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..!
Post a Comment
<< Home