Buku Tamu Slide effect with jQuery

Untuk demonya bisa dilihat disini

Cara membuatnya :
1. Login blogger
2. Rancangan, Tambah Gadget,  Html/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/AVvXsEhSm0mtezQcTQ8NFXIGX9aEYnYjKGVrS_2sazGPDH3RZNp-nVEbolzjOxmZj5KKqxixQRFrzFWKlB6xVPjNbwi4StlS0BWMioCpuzewmHdK_pPGBATGUuaODao5ddv1gPc510gqEUGb-lQ/s1600/btn-slide.png) no-repeat center top;
   
}
.btn-slide {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWL2oP4mgXl414pBSdzrE1uMDQwevyk_CEzFdFVdP8DxidaslVf0tKrHgr3eR_bjP0VRm_nhUU-5sEbK5c7wJAcv8i6dNsP5AjOD5EbgQY5rg5jO0g3ww4BMAnKTo8GE147o4iZxh5ag/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... :)