-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Buku Tamu Slide effect with jQuery

Untuk demonya bisa dilihat disini





    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Tambah GadgetHtml/Java Script
  3. Dan Simpan 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(){

    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
  
    
});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
        height: auto;
        background: #f90;
        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/AVvXsEhqMh0WyuEL5KmflRwd4hsPLmfIPl41UFFTzIgXAX3v6ztKZ-qiLerhBHasiaQD_cUs1RhNsR8aBRHhzP8yK020Uwj4AJZShONs9sz_zXhE6QVFQHJLAHp3aIxWhdZNKKFi2aQYkfudjEw/s1600/btn-slide.png) no-repeat center top;
  
}
.btn-slide {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLEYCNFAQ__IhrFhXioy40bSuVu5douX2Qj_zzbcO21rekOtNf2r_V95dhWHaKctqDNQIAa0ecLrJn81LEltfd5k5SibViOqEhnZgaHqEdf8i1tumvnAEtHbuFKAQhfPyuJniMBGVhNto/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">

    <!-- Simpan Script Buku tamunya disini -->

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>
Catatan: Jika sudah ada script jquerynya misalkan pada Template kawan-kawan, yang script jquery  berwarna biru tidak perlu ditambahkan.
4. Simpan dan lihat hasilnya

Sebenarnya tutorial ini sudah saya postingkan tapi belum dikhususkan sebagai Gadget Guestbook, masih banyak kekurangannya tapi jika kawan-kawan berminat silahkan di coba saja, semoga bermanfaat. +muga bisa dikembangkan lebih baik... :)

Leave a Reply