08 Desember 2011

Cara Membuat Buku Tamu Tersembunyi dengan JQuery

Assalamualaikum...bagaimana kabar teman teman pada hari ini? semoga selalu dalam keadaan baik dan selalu dalam lindungan Allah SWT yah...^_^. Pada tulisan kali ini, saya akan sedikit berbagi tutorial blog tentang bagaimana cara membuat buku tamu tersembunyi dengan menggunakan jquery. Nah, langsung dimulai aja yah :D

1. Seperti biasa, masuk ke Rancangan >> Tata Letak >> Add Widget >> Html/Javascript.

2. Copykan 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">

    <!-- Copykan Kode Buku Tamunya di sini -->

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


Pada tulisan warna hijau, ganti dengan kode buku tamu teman teman, sedangkan pada kode warna biru ganti dengan kata kata yang teman teman inginkan

4. Save dan lihat hasilnya  

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Buku Tamu Tersembunyi dengan JQuery

0 Komentar:

Posting Komentar

Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^