Morning bro , pagi pagi nih , langsung aja update selagi ada waktu , mumpung bentar lagi mau sekolah , gw post tentang trick trick sedikit ,nah liat kan judul diatas , itu yang akan kita bahas sekaarang , bagi yang lu suka buat experiment di blog blog lu , ya coba coba aja dehh.. oke nih langsung ajaa
ini chat box nya hanya pondasi nya aja (awalan) , untuk selebihnya bisa lu kembangin sendiri dah. ini nihh demoonyaa
untuk CSS nyaa.
.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}
dan HTML nyaa
<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>
nah untuk selebihnyaa bisa dikembangkan sendiri yaa , selamat mencoba
source
