Cara membuat buku tamu slide Effect Jquery

      kali ini akan saya bahas mengenai Buku Tamu atau Guest Book. tapi kali ini agak beda , yaitu ada taburan cinta dari gadis muda bernama Jquery. maka judulnya saya beri Membuat Buku Tamu Slide Effect Jquery. gag kebayang gimana bentuk si Tante Jquery ini kalau lagi barengan ama Buku Tamu ?

 tertarikah dengan Buku Tamu Slide Effect Jquery?
Untuk membuatnya anda hanya perlu : Masuk ke Blogger = Rancangan + Tata Letak + Add Widget + Html/Javascript - 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(){



    $(".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/AVvXsEgTIYndDiznCygotSNNfRAJKXbwjAwl8MrugyiSc7LFAwiRW8C81AzwIVo_YCe3pbphoweaKBA9XzoI1fwlhG7Z9pXeaCXZGVxyiY3F3RWEePVLLhAZL4uIkyRxh0QFQ1EmgC13KMiV7IA/s1600/btn-slide.png) no-repeat center top;



}

.btn-slide {


    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVE9KEX14UYDJ7bVpl3XkPAL5cw6D_Dd2p3B5Gm6cdsn5gWAMgqA0PquvhcfZzZO0pzLa9GnlQJJg4GLhRMv8GwXr4kHuVgolU5cyAVCdV9EsIU2yL4iHDXL-0HlojKz-M4amWsqK2Wgg/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 : 1. jangan lupa ambil dulu script Buku Tamunya Disini
2. jika sudah ada script jquery yang saya tandai dengan warna biru ditemplate sobat tidak perlu  ditambahkan lagi.

Cukup sampai disini saya menjelaskan Cara Membuat Buku Tamu Slide Effect Jquery , semoga bermanfaat bagi anda.