Show Hide Chatbox Efek Jquery di Sidebar Blog

"Preview Show Hide Chatbox Jquery"

Hello sobat Blogger, Apa kabar ? Semoga dalam keadaan sehat wal'afiat selalu dech sob. Ok untuk postingan saya kali ini, Saya ingin memposting tutorial bagaimana cara membuat Show Hide Chatbox dengan efek Jquery, Sebenarnya ini sebuah modifikasi dari pengembangan efek Show hide dengan menyisipkan sebuah objek (Chatbox) didalamnya Lalu yang membedakan dengan fasilitas sebelumnya, untuk tampilan show hide pada chatbox kali ini terkenal lebih elegan dan simple dengan disertai efek jquery yang membuat show hide chatbox ini menjadi lebih enak dipandang mata (Heeleeehhh ... ).

Untuk Previewnya lihat gambar diatas. Jika sobat tertarik, silahkan ikuti langkah berikut :



1. Login ke Blogger.2. Lalu dari Dashboard, pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget
4. Pilih HTML JAVA SCRIPT
5. Masukkan Script Berikut Di dalamnya :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});


});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background:#000;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8FJ1nYcL9kXnPeMabf3hTqwe_qqfGsaK4hbGAYovuOHMcirrzMaWCQ4PCD0vcSPM2ipy8V17lCK5Ty_jqdpPT0rdBnGe4TCKq_m6-HtOVnZ9tn20fU55I0WxKNG-GH-XUynwbrUDrG9U/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd0p1aGJiCkUTBO2l97wyHeBMYmxPswhAGYZH62Sn50VfCQRnu_r7t1dtJdvozS3PmLgSzc7w1CKF1yOiobVrogyYjGg-5sBmsNZNYIp-RDaf1C583HNQjT9qVKmm8f1a2j0BFpTk2z0U/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

<div id="panel">

Kode Cbox Disini

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

 Note : Kode Cbox Disini : Ganti dengan kode Chatbox yang dapat diperoleh di Cbox.ws, Shoutmix.com, dll


6. Lalu setelah mempaste kode tersebut, klik Simpan.