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

20   komentar

Keren..bro..tutornya..
bisa di coba..
Reply Delete
gan itu kedua kodenya di masukin apa salah satu aja?
Reply Delete
Gan koq gak bisa ya :(
Reply Delete
Sebenarnya saya mau terapkan di blog saya, tapi kayaknya nggak cocok Mas.
Reply Delete
sumbernya drmn mas,,,
Reply Delete
yang untuk Css, semua kodenya langsung saya copast ke blog saya ,, caranya bener gitu kan? ,,thanks
Reply Delete
itu di masukkan kemana bang oktri?
Reply Delete
gan bisa dihilangin gak yang warna putihnya?
Reply Delete
coba di otak atik kode nya pasti bisa
Reply Delete
untuk menghapus pesan yg lama gimana??
Reply Delete
tampilan blog anda sangat cool.

sangat membantu, sudah terpasang rapih diblog saya http://bakkalolo.blogspot.com/
Reply Delete
gmana gan cara pasangnya
Reply Delete
wah, mantap mas,, lanjutkan sharingnya ya

salam
http://indexiapk.blogspot.com
Reply Delete
ane coba gan

blog walking

http://www.akhirmali.com/
Reply Delete
Visit balik gan http://desainrumahunik.info/rumah-tinggal/
Reply Delete
Gan ini masang nya di mana ?? Edit html atau add gadget ?? Kalo di edit html nyimpenya di mana gan ??
Reply Delete
nice post, tapi aku blm ngerti
Reply Delete

Posting Komentar

Cancel Reply