Kali ini saya mau share cara buat chatbox di blogger kita agar bisa di show dan hide dengan menggunakan Jquery. caranya mudah aja:
1.Login Blogger » Design
2.Klik Add Gadget » HTML/Javascript
3.Copy dan pastekan kode dibawah ini
<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>
#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/AVvXsEjzy382WY_2uEHzLGtowNPoLBsi4-0L9qnvwHLN4bsK34JM5L6jdmWnYyHIhJXf9hkPUJCkmtbQxMFOAAu4utbvSKhgTocIlWr95LoZ0hkEbqmMTCCLEpWMfb-eTFhzmXJRAOEOG6D4NqA/s1600/btn-slide.png) no-repeat center top;
}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLa2u8N_5HSEFhNBFArcCj8GQ4T1zr9ZDtz9-wkNs2l1auqr7XpKvS4OlrRcAMpmMeTGrw27__W7IagK5LNDSPs-RFqoucuTm8ReFWNX7gth8f2WFkc7tCqumiOBLvQR8AUR_JcOMmaOU/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 CHAT BOXMU
<center><a href='http://dok-edok.blogspot.com/2012/01/cara-membuat-showhide-chatbox-pada.html' target='_blank'>Get This Widget<br />(Show/Hide Chatbox)</a></center>
</div>
<p class="slide"><a href="#" class="btn-slide">Chatbox</a></p>
4. Ganti tulisan berwarna
MERAH di atas dengan kode chatboxmu
5. Tekan save dan selesai
