membuat chat box show and hide dengan jquery

hii sob ketemu lg...
nih shifu akan posting seputar membuat chat box show and hide dengan jquery
apa sih yang dimaksud dengan chat box?
-chat box adalah kotak untuk chatingan (seperti YM!)
kok show and hide?
-nanti chat box nya bisa ditampilkan secara manual dan di sembunyikan secara manual juga, sehingga tidak mengganggu kenyamaan pengunjung blog kita sob dan sesuai keperluan saja
apa itu jquery?
-seperti postingan sebelumnya, adalah alat untuk penyederhanaan dalam pengeditan kode HTML
nah untuk sampelnya bisa dilihat pada gambar
mari sob langsung aja ke tutorialnya

1. jangan lupa login ke blogger dahulu
2. masuk dashboard > rancangan > elemen laman > tambah java script > pilih HTML / java script
3. lalu masukkan semua kode dibawah ini ya sob

<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/AVvXsEgl3zu5ySkNxUXfSi8Ytu7Dc1m20_T3OHh-VEut47SFpWX9KgpmhMleNTJ6BWdQsmqc34aBBUtYqK8vQ18KWyqaCovLGdOeD86zaZbFFuNhClpOzhDiRAZ2ANftDwz4_AjMH5c7p254lBc/s1600/btn-slide.png) no-repeat center top;

}

.btn-slide {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkZLUNHdKeOAVGNIftsXoVI3rKyHHMFQyfCMO2zdTrpd6piTZUH4Tam9gKK0ai9X0gMtscTCqfr6chYYW9m_1Hxzd7YfgVpkDbUR-opiinKqm8iYs_XiTxBdg_e5P4tCWr9061z_Xf4A/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 box Disini

</div>

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

4. kode chat box disini diganti dengan kode chat box kesukaan sobat. bisa didapat di Cbox.ws, Chatroll.com, Shoutmix.com, dll
5. tulisan buku tamu bisa diganti dengan kesukaan sobat
6. jangan lupa di save sob..

selesai sudah. semoga sobat tidak kecewa dengan postingan ini
jangan lupa ditunggu like, komentar nya sob..

Artikel Lainnya