Show Hide Chatbox Efek Jquery di Sidebar Blog

"Preview Show Hide Chatbox Jquery"

Hai Para Blogger sekarang saya akan membahas tentang cara membuat Show Hide Chatbox Efek Jquery di Sidebar Blog
Berikut carnya

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/AVvXsEiXv00Enk2Ij2cMETxmSMxWusxPfFIpgOWf3-4RP2vklTBTUXto-KGvFcgKl3iJFEMNXQlH6jRIeHbBjoNDeNBT5WTYYQBkKCOkyj5SlN29SVojAgdASA_nnuuk9sCDH0efrkBI0Rwphug/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsyBX3JP7XJ0grzUAsHU9CV91P7EdPahiGRrtZLcYNClJOSjuq8oXqAbRox6mGDn92eZhutND_Gc_TH85TPvGoHyHyL_JyDJ3ngzgmuXs8yxRavEByZq1meByn0G4zST0-MucgzizFVVE/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.

Bagaimana, berhasil ? OK, Jangan lupa share dengan teman-temanmu di Facebook, twitter, dll. Thanks

.:: HAPPY BLOGGING SOBAT ::.

Posted in: Tips Blogger