Membuat Chatting ala Facebook di blog

on

Selection_035

Chatting atau fasilitas ngobrol adalah sebuah media yang seharusnya memang harus ada disetiap website atau blog. gunanya adalah untuk komunikasi antara admin/pemilik web/blog dengan pengguna atau visitor blog. langsung aja berikut cara buat fasilitas chattingnya,

1. anda buat dulu media chatting yang grastis, banyak di sediakan. berikut saya kasih beberapa link untuk membuat shoutbox/media chatting:
shoutmix.com
yourshoutbox.com (recommended) karna full feature.

2. tinggal masukkan kode berikut ke widget blog untuk membuat chatting ala facebook dengan posisi dibawah,

<style>
.chat-box {
font:normal normal 11px/1.4 Tahoma,Verdana,Sans-Serif;
color:#333;
width:222px; /* 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:30px;
z-index:4;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
}
.chat-box > label {
display:block;
height:30px;
line-height:24px;
background-color:#344150;
text-align:center;
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}
</style>
<div class=”chat-box”>
<input type=”checkbox” />
<label data-collapsed=”Buka Chatbox” data-expanded=”Tutup Chatbox”></label>
<div class=”chat-box-content”>

isi dengan kode script shoutbox sobat

    </div>
</div>

3. tinggal save dan lihat hasilnya

klik disini untuk lihat hasilnya Demo

selamat mencoba dan semoga berhasil!🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s