Cara membuat buku tamu slide Effect Jquery




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 ? 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://lh3.googleusercontent.com/-XGxvD-bjtLk/TXo6ZGh056I/AAAAAAAAAUI/zvBMp0DrML4/s1600/btn-slide.png) no-repeat center top;



}

.btn-slide {


    background: url(https://lh5.googleusercontent.com/-Ia33wJE4nHY/TXo1KNUSasI/AAAAAAAAAUE/Uss0CKLZP9U/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 : 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.


Reff : Blogging with me

Cara membuat buku tamu slide Effect Jquery



Share this to:
Anda sedang membaca artikel : Cara membuat buku tamu slide Effect Jquery dengan url http://arifpoetrayunar.blogspot.com/2011/07/cara-membuat-buku-tamu-slide-effect.html

Artikel Terkait: Cara membuat buku tamu slide Effect Jquery

{ 1 komentar to : Cara membuat buku tamu slide Effect Jquery | Skip to Comment }

Dopido mengatakan...

salam sob, saya malah tertarik dengan button hiidennya, kalo diklik muncul textnya, apa ada tutorialnya sob disini? trimakasih

Poskan Komentar

 
Back To Top