Buku Tamu Show/Hide Di Sidebar

Buku Tamu Show/Hide Di Sidebar  Di pagi hari ini saya akan share tentang cara membuat buku tamu show/hide di sidebar,ok gak usah basa basi lagi angsung saja cekedot...  Berikut Screenshotnya :  Show :  Hide : Bagaimana tertarik untuk memasangnya?? jika sobat ingin memasangnya silahkan ikuti langkah-langkah berikut :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya   

<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:#000;     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/AVvXsEiXNB5ua9Lc9hJr5TBIqw3yS6MSElJ2jYk7UboF7bzDdy1ymYauyuxFpRYGgXQa2-dRMqJjwjlUNRXSYQdepF30H09vUSZhyphenhyphenypFFM7e4hbvjlfM-QDCPdf-B_kp4bIyMLo3OxhWylHyhWA/s1600/btn-slide.png) no-repeat center top;     }     .btn-slide {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMvXGAD1lxkF7rGffy4BizBukorwleY5PbYBkMsA5DHvDYgWigMQoP8E8k8VlYEBKjoxYTwyMegq4RixW8A7tYkt3QaZimzznfnoXJqeHbLRaTX4QhxCiQFCp4PSspMHohXlNIF3CVzk/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">     --> Kode Cbox Disini <--      </div>     <p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

5.Save.
  Catatan :  - Yang Berwarna kuning adalah background cbox. - Tang berwarna merah ganti dengan kode Cbox. - Dan yangberwarna orange adalah tulisan tombol Cbox