Membuat Chat Blog Dengan Tampilan Facebook

Chat pada web/blog sangat banyak macamnya. Pada blog ini saya menggunakan fasilias chat dari ShoutMix. Namun yang akan bahas disini adalah bagaimana memodifikasi tampilan chat pada blog menjadi lebih menarik. Anda tidak harus menggunakan fasilitas chat dari shoutmix, akan tetapi anda juga bisa menggunakan yg lain.

Langkah - Langkah Memodifikasi Chat Pada Blog :

1. Daftar pada ChatBox or shoutmix 

2. Copy kodenya "saya menggunakan ChatBox"

LIHAT DEMO 

3. Sebelumnya tambahkan kode berikut pada template

4. Masuk Blogger >> Tata Letak >> Tambah Gadget >> HTML/Javascript

5. Masukkan kode berikut

<style>
.chat-box {
  font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
  color:#333;
  width:200px; /* Chatbox width */
  border:1px solid #336DFF;
  border-bottom:none;
  background-color:white;
  position:fixed;
  right:3px;
  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:#184185;
  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:#14243F}

/* checked state */
.chat-box > input[type="checkbox"]:checked + label {background-color:#184185}
.chat-box > input[type="checkbox"]:checked + label:before {content:attr(data-expanded)}
.chat-box > input[type="checkbox"]:checked ~ .chat-box-content {display:block}
</style>

<div class="chat-box">
    <input type="checkbox" />
    <label data-expanded="  XO- Tutup Jendala Obrolan -OX Anda" data-collapsed="XO- Tinggalkan Pesan Anda -OX"></label>
    <div class="chat-box-content">

        <!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4216230&amp;boxtag=nxkwcf&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4216230" style="border:#ababab 1px solid;" id="cboxmain4-4216230"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4216230&amp;boxtag=nxkwcf&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4216230" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4216230"></iframe></div>
</div>
<!-- END CBOX -->

</div>
</div>

 5. Letakkan Kode HTML Chat yang telah anda buat tadi tepat dibawahnya kode <!--  Kode HTML warna merah --> 
6. Save
7. Demikianlah sedikit tutorial Modifikasi Tampilan Chat Pada Blog Menjadi Seperti Tampilan Chat Facebook, selamat mencoba.