Cara Membuat Chat Box Di Blog

Cara Membuat Chat Box Di Blog - sekarang Firman Blog akan membagikan Widget Chat Box keren ala Kang Ismet, widget ini dirancang untuk menambah fasilitas chat pada blog.

Cara Membuat Chat Box Di Blog

1. Masuk ke Blogger.
2. Pilih Tata Letak > Add Widget > Pilih HTML/JavaScript.
3. Dan copy kode di bawah ini dan pastekan di HTML/JavaScript.

<style scoped="" type="text/css">
#kangischat{
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsc47aXJtPqcfkLQcdHOMtDEZ67KCyeVzgZYbWAF0y8sEXKkseVHli7dhBuem5JmRmmFVzhLgWr3bzMysOq4JmC6jxmUdP9Z0xfP0H1Ci3DNc6CRPvDlTT6aUkHFqxzRZv6o3KdXoe5c/s1600/chatbg2.png)repeat-x top;
text-align:left;
color:#333;
font-family:Arial, Sans-serif;
box-shadow: 0 0 5px 1px #bbb;
padding:12px 11px 10px;
}
#kangischat a {
color:#80bc00;
}
.chatdalem {
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxa-s2ns7FIBoKKsJm8wMVy4Moh5EmJhVSh1u21boVnNyia-x7CmjCRvPGP2Q8GvYNYBMQsrpi4oX69WflmSUYUx6ggPh2hVCEqe5mezwC5MbahS_lS5PG2ayNYUKrlj9SqVmXtmM4i_8/s1600/shoutmix-loader.gif)no-repeat 50% 40%;
position: relative;
margin-top:17px
}
#bukachat {
background:#80bc00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskIY_LlEYhhWcQy2jKRYi6jwAIbv4cuP1mNDZw1BF4qLz1rZ0X2wEYY0le0lckC-1s2nYMu0daTqO-V1LGPdHbUAN5CreEdqMS8dDRN8RRtp1WpM4p2TJzLiq6tD08Nv5uhkzzfjmhAk/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
cursor:pointer;
box-shadow: 0 0 5px 1px #bbb;
display:none;
}
#tutupchat {
background:#80bc00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskIY_LlEYhhWcQy2jKRYi6jwAIbv4cuP1mNDZw1BF4qLz1rZ0X2wEYY0le0lckC-1s2nYMu0daTqO-V1LGPdHbUAN5CreEdqMS8dDRN8RRtp1WpM4p2TJzLiq6tD08Nv5uhkzzfjmhAk/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
box-shadow: 0 0 5px 1px #bbb;
cursor:pointer;
}
</style>

<div id="bukachat" style="display: none;">
Buka Obrolan</div>
<div id="tutupchat" style="display: block;">
Tutup Obrolan</div>
<div id="kangischat" style="display: block;">
<span style="margin-left: 6px;">Mau request? silakan <a href="http://sht.mx/firmanblog">disini</a></span>
<div class="chatdalem">
<center>
<!-- Begin ShoutMix -->
<iframe frameborder="0" height="480" id="shoutmix_firmanblog" scrolling="auto" src="http://sht.mx/firmanblog" width="auto">
<a href="http://sht.mx/firmanblog">ShoutMix Live Chat</a>
</iframe>
<!-- End ShoutMix --></center>
</div>
</div>
<script type="text/javascript">
$('#bukachat').click(function() {
    $('#kangischat').show(500);
    $('#bukachat').hide();
    $('#tutupchat').show();
});
$('#tutupchat').click(function() {
    $('#kangischat').hide(500);
    $('#bukachat').show();
    $('#tutupchat').hide();
});
</script>

1. Kemudian klik Simpan Sekian tutorial dari saya semoga bermanfaat.