Membuat Bingkai Chatbox Dengan Efek Toggle

Membuat Bingkai Chatbox Dengan Efek Toggle - Setelah ada teman saya yang request artikel membuat sebuah bingkai pada objek Chatbox dengan tombol buka/tutup nya yang lembut dan support pada area disekitarnya.

Secara sederhana Toggle di sini adalah sebuah tombol yang berguna untuk menyembunyikan dan menampilkan unsur lain dengan efek khusus yang halus dan support pada area disekitarnya. Bagi Anda yang belum mengenal istilah Toggle, insya allah pada postingan berikutnya akan saya bahas beserta efek-efeknya.

CSS

#kangischat{
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHxcOEfMfqZ-JK6J4ez667Vdj48qTkeqhPIo7v6cM4UOWLxIcb_BVWbYCC8LnyBHI2huFZa14xPgOl84ljHnLTmquG3nBk8oWJstI232uQp9Ao47wABDV7WlYrEA5s66Vc-i2HrjxbMfU/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:#45b2a7;
}
.chatdalem {
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Tfju52Jw7LT7hFjVJK4AV55jJLFYqPvk3DKwf1amMo_iVIz6S1haQDv966zNxRLPNnjnkSQ9UXTXzH2P8erY5nAO5NtTeGgR5PbFBVUr7f9_GQuddaQHDRd0PlrsYJ4FA5xELSULL6Y/s1600/shoutmix-loader.gif)no-repeat 50% 40%;
position: relative;
margin-top:17px
}
#bukachat {
background:#45b2a7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOndK4rn-WpCiYWdJ7Ep6wK4-_AhBPntUWCMAAdLDCccvKk1JT5d-ksKKRXv2CPAbx6A3bmuhxxZUQUAptZOJFAo9KCnXWCaKVM86XI7R1Skcyibik0sWzetIHPHShDY9vs0Uo3LcaDM/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:#45b2a7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOndK4rn-WpCiYWdJ7Ep6wK4-_AhBPntUWCMAAdLDCccvKk1JT5d-ksKKRXv2CPAbx6A3bmuhxxZUQUAptZOJFAo9KCnXWCaKVM86XI7R1Skcyibik0sWzetIHPHShDY9vs0Uo3LcaDM/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;
}

HTML

<div id="bukachat">
Buka Obrolan
</div>
<div id="tutupchat">
Tutup Obrolan
</div>
<div id="kangischat">
<div class='brol'>Ikuti aturannya <a href="http://hilbramkurnia3.blogspot.com/p/peraturan-chatbox-blog-hkbt.html"><b style='color:#80bc00'>disini</b></a></div>
<div class="chatdalem">

Kode objek Chatbox disini

<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></div></div>

Semoga bermanfaat