Membuat Buku Tamu Slide Effect Jquery

Wah makin sepi aja pngunjungnya, tapi saya tetap semangat untuk berbagi ilmu. 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 ? lihat aja demo berikut :

Sudah lihat contoh ? 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/AVvXsEjXutPAdhmWoRJ0NQQk0eajrnaZWh7cUAYOWnKKXIGeBy6NIToUFLZJodQ8D6jYXbajWH0eWAnk5n-S6fM9cXQg15SP1kY1-WU-FSKJKjPN5n7ZdJwR8iqwzqA0Z7DHtXWXbAg6iDufAXk/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMd6PoDObcf5suSTeNYCofyy5TU6zqK3NZMLpvg7eZgnYX8IYb_X5StT44QBPkUDrtW86B9RH7NI0ZqdVanHDPCEEYfsvAfVnTwthGcQY815h1tzVTcYTN7DgIzqT5tcFTcJZzA0P3bWM/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">

    

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Catatan : 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.

Selasa, 20 September 2011

Membuat Buku Tamu Slide Effect Jquery

Artikel Terkait:

0komentar:

Posting Komentar

MY BANNER