Jquery Guest Book Ala Jaluffy

Wednesday, June 22, 2011

Jquery Guest Book Ala Jaluffy

Sebenarnya sih,ini cuma permainan fade in & fade out,tapi gak papa lah kalo aku postingin.

Script-script ini langsung saja ditaruh di dalam tag <body>.

    <script type='text/javascript'>
      $(document).ready(function() {
            $(".btn1").click(function() {
                $("#gb").fadeIn();
                $(".btn2").fadeIn();
                $(".btn1").fadeOut();
            });
             $(".btn2").click(function() {
                 $("#gb").fadeOut();
                $(".btn2").fadeOut();
                $(".btn1").fadeIn();
            });
        });
    </script>
<style type='text/css'>
.btn1,.btn2
    {
z-index:1000;
    background:#CCCCCC;
    width:230px;
    height:20px;
    position:fixed;
    border:darkgrey;
    bottom:0px;
    right:10px;
    border-style:outset;
    text-align:center;
    font-style:oblique;
    cursor:pointer;
    }
.btn2
    {
    display:none;
    }
#gb
    {
        z-index:1000;
    display:none;
    background:#CCCCCC;
    width:230px;
    height:460px;
    position:fixed;
    border:darkgrey;
    bottom:21px;
    right:10px;
    border-style:outset;
    }
</style>
<div id='gb'>Ganti Tulisan Merah Ini Dengan Kode Buku Tamu Kamu</div>
<div class='btn1'>Guest Book</div>
<div class='btn2'>Guest Book</div>