Cara Membuat Chatbox Seperti Obrolan Facebook Pada Blog

Tutorial Belajar Blog - Cara Membuat Chatbox Seperti Obrolan Facebook Pada Blog | Pada postingan ini Belajar Blog akan berbagi Tips Blog Cara Membuat Chatbox Seperti Obrolan Facebook di Blog/Website. Tutorial Ini terinsiprasi lagi blogmate DTE yang sudah mau berbagi informasi tentang informasi blog ini





<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 :)