Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
26 Feb 2014

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

13 Komentar

Keren Gan ..
Ini yang saya tunggu2 ..
thanks udh share ..

keren gan, biar shoutboxnya gak main setrum :3

Infonya bener bener lengkap. Saya juga sedang mendalami nya :) thanks yaa

Terima kasih gan dan semoga sukses.. :-bd

Dimana letak kode css nya ?

Komentar ini telah dihapus oleh pengarang.

Taruh diatas kode ]]></b:skin>

jadi nya seperti ini
http://i1291.photobucket.com/albums/b553/halim011/Chatbox_zpsaf9548cd.png
kok ngak pas ya?
http://halimtc.blogspot.com/

Itu tinggal diatur aja width (lebar cbox) sama height (tinggi cbox), bisa disetting sendiri pada objek kode cboxnya..

HTML sma CSS di taro dmn yaa ???

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup