Cara Membuat Chatbox Slide Vertikal Dengan jQuery

Cara Membuat Chatbox Slide Vertikal Dengan jQuery - Tentunya anda sudah pernah melihat kotak chat pada sebuah blogger, Cbox namanya. kotak chat satu ini biasanya digunakan para Blogger untuk berintraksin dengan pengunjung. kotak chat satu ini sudah saya modifikasi sehingga tampilannya sedikit tersembunyi, sehingga tampilannya menjadi lebih rapih.

Untuk menampilkan menu chat pada kotak Cbox anda cukup anda klik tombol Cbox disebelah kiri atas maka akan mucul tampilan Kotak chat, sebelum memasang Chatbox Slide Vertikal Dengan jQuery anda terlebih dahulu memiliki Script Chatbox dan  anda sudah terdaftar di akun Cbox, untuk mendaftar keakun Cbox anda bisa membacanya disini.

Berikut ini saya tampilkan screen shoot Chatbox Slide Vertikal Dengan jQuery :

Bagi anda yang tertarik untuk membuat Chatbox Slide Vertikal Dengan jQuery berikut ini langkah-langkahnya :

1. Anda Login keakun Blogger
2. Selanjutnya anda Pilih Template » Klik Edit Html
3. Jangan lupa centang Expand Template Widget
4. Dengan mengunakan Ctrl+F silahkan anda cari kode ]]></b:skin>
5.  jika anda sudah menemukannya letakkan kode CSS dibawah ini tepat  diatas kode ]]></b:skin> 

.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:450px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{font:normal Arial, Sans-Serif;color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{font:normal Arial, Sans-Serif;color:#4BB3E4;text-decoration:none;border-bottom:1px solid #4BB3E4E;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:170px;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. Selanjutnya anda cari kode </head> dan terapkan kode dibawah ini sebelumnya atau diatas kode </head>

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

Note :

Jika sebelumnya anda telah memasang script Jquery diatas,  maka anda dapat meninggalkan langkah diatas.  

7. Kemudian anda terapkan kode Javascript berikut dibawah script jQuery tadi:

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

8. Denagn cara yang sama dengan menggunakan ctrl+F anda cari kode </body> 

9. Kemudian anda terapkan kode dibawah ini sbelum kode </body>

<div class="panel">

Silahkan anda terapkan kode script ChatBox Anda

</div>
<a class="trigger" href="">ChatBox</a>

Note :

Silahkan anda ganti tulisan berwarna merah dengan script Cbox anda

Demikaian cara Membuat Chatbox Slide Vertikal Dengan jQuery, semoga menambah refrensi anda dan semoga bermanfaat!

Share this post