Thursday 22 March 2012


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/AVvXsEiUUs2EsUNgeAoknLc-zuCSQI6ie0T4u2I_MiqCBiOaSqsqAJ5WmvWYWmRPb5bq3lh33hfSXt8QrR4Mm1ux0Bmwl02iMfMBcAlImRIDXCarLjgJXTXBGZIAr5yrWyqBCIv_XV1nTuLTpWc/s1600/gbslide.png) no-repeat center top;


}

.gbbtn {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaw5TLux5b0PTHcUA1Y1g-SOKXYFuGd4E5mxMXfBLfHHSyE396z5p4Wex2Cym5spXWdhoFePX5Z-A_midlnR_a4A3Rn5Qc7XOa7CRnOR2sg6Yw_tIMCARZ8mUVI9QMxaur9LGJHkoIpVQ/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

<!-- Simpan Kode buku tamunya disini -->


</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/

0 comments:

Post a Comment

 
Toggle Footer