Cara Membuat GuestBook dengan Efek jQuery ~ Kayuagung Cyber

Cara Membuat GuestBook dengan Efek jQuery

Tidak ada yang perlu di jelaskan lagi... ( soalnya lagi bingung )
ini skrinsutnya :

1. Masuk ke Rancangan / Design

2. Elemen Laman / Page Element

3. Tambah Gadget / Add a Gadget

4. HTML / Javascript

5. Paste Kode berikut :

<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(){

$(".gbbtn").click(function(){
$("#gbcontent").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});
</script>
<style>
/* ---------------
Guestbook dengan jQuery
by :myhavies.blogspot.com
Url : http://myhavies.blogspot.com/
---------------------------------- */
.gb {
position:fixed;
top:0px; left:0px;
z-index:+10;
}
#gbcontent {
height: auto;
background: #898787;
width: auto;
display: none;
padding: 10px;
border: #000;
-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;

-webkit-border-bottom-left-radius:10px;
}
.gbslide {
float:left;
margin: 0;
padding: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6jcynFihL_6YAyiJlpcTFzpvzpvA_EKz2UuF1GICSZOlF8Ki3E0EnBoYCVQ9rckoxEfPaQ18lKmYFCfn60pnzXwwkrK0kgpnirBtiUsnHX4IlDQ8ddT2qBbOLYpSVMefZ8gATRGZoRc/s1600/gbslide.png) no-repeat center top;

}
.gbbtn {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickT84gJU-kR1H3sYPMMTduP6XNgOcacaFzQamTVMl7EnGXeeNSfPRU5IqyJ3d4uuAEQpTXP2G7Ud8DvMTgKGsOVAKdvcUwkBNZRZEDnhumdTkBgHPRjAyn1-3PeMU97UY72k7kdue_LI/s1600/button-Close-open2.png) no-repeat right -45px;
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: #CCC;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">b



</div>
<p class="gbslide"><a href="#" class="gbbtn">Guestbook</a></p></div>

Note : Apabila kode yang berwarna merah sudah terdapat di blog sobat, tidak perlu lagi ditambah
Ganti Kode yang berwarna biru dengan kode script guestbook sobat
Ganti Kode yang berwarna hijau dengan Kata kata yang sobat inginkan

Sekian tentang cara membuat Guestbook dengan jQuery ' Semoga Bermanfaat :)

Sumber http://myhavies.blogspot.com/