Cara Membuat Chatbox Seperti Obrolan Facebook

Pada postingan kali ini kita akan memberikan Cara Membuat Chatbox Seperti Obrolan Facebook di Blog/Website. Kalian bebas bisa naruh di blog apa..boleh Blogger, Wordpress atau yang lain. :D

Kode HTML nya :

<div class="chat-box">
 <input type="checkbox" />   
<label data-collapsed="Buka Chatbox" data-expanded="Tutup Chatbox"></label>     <br />
 <div class="chat-box-content">

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

</div>

</div>

Nah kalo yang di bawah untuk cssnya :

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

Semoga bermanfaat codingnya :)

Anda baru saja membaca artikel yang berkategori Blogger dengan judul Cara Membuat Chatbox Seperti Obrolan Facebook. Please...di share keteman-teman yang lainnya yaa... dan jika ingin berlangganan Artikel di Blog ini secara Gratis, Tinggal masukin aja Email kalian di Bawah ini...!!! Thanks : Cuek2Bebek - fiQQi / eeChad

Subscribe via Email

Ditulis oleh: Unknown -