Buku Tamu Slide effect with jQuery

1. Sign in di blogger.
2. rancanagan / tambah gatget
3. simpan kode berikut di blog anda  
4. <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(http://blogdimash.wap.sh/btn-slide.png) no-repeat center top;
     
   }
   .btn-slide {
       background: url(http://blogdimash.wap.sh/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>
5. save template dan selesai........

Buku Tamu Slide effect with jQuery 9out of 10 based on 10 ratings. 9 user reviews.