Cara Membuat Chat Box Dengan JQuery

Minggu, 20 Oktober 2013

Laba-Laba Blog - Halo kawan, kembali lagi bersama saya untuk memposting sebuah artikel yang seperti biasa selalu membahas tentang dunia blogger yaitu Cara Membuat Chat Box Dengan JQuery. Chat box adalah suatu atau sebuah tempat dimana kita berkomunikasi, berinteraksi dan lain-lain serta chat box itu hanya terdapat pada blogger saja. Tidak hanya chat box saja tapi masih ada satu lagi yaitu shotmix, shotmix sama saja seperti chat box tapi yang membedakan yaitu hanya tampilannya kalau chat box tampilannya elegant serta scriptnya tidak terlalu panjang sedangkan shotmix tampilannya kurang begitu bagus serta elegant dan scriptnya terlalu panjang dan menyebabkan blog tersebut menjadi lola (loading lama). Tampilan chat box sangat bermacam-macam, seperti yang saya sedang bahas ini chat box tersebut memiliki tampilan dengan jquery (elegant). Mau tahu bagaimana cara membuatnya? ikuti langkah-langkah dibawah ini.

1. Masuk ke blogger.
2. Pilih template.
3. Pilih edit html.
4. Cari kode ]]></b:skin>
5. Salin kode dibawah ini kemudian taruh diatas kode tadi.

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

6. Setelah itu, anda cari kembali kode </head>.
7. Apabila sudah ketemu dengan kode tersebut, anda bisa salin kode dibawah ini serta taruh (paste) diatas kode tadi.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

8. Salin kembali kode jquery dibawah ini kemudian taruh dibawah kode (script) jquery sebelumnya (pada nomer 7).

<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

9. Apabila anda sudah menyelesaikan tugas pada nomer 8, selanjutnya anda kembali harus mencari kode <body>.
10. Jika anda sudah ketemu dengan kode diatas, anda bisa salin kode dibawah ini dan paste diatas kode nomer 9 tadi.

<div class="panel">
Kode chat box anda masing-masing
</div>

11. Simpan.

Catatan : Gantilah kode yang sudah ditandai dengan warna merah dengan kode chat box anda masing-masing.