membuat slide buku tamu keren

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

5 comments:

  1. nice share (y)...
    di sini, mana buku tamunya, kok ane gak liyat ?
    oh yah, follow back yah gan, ane jadi org ke 56 yg follow agan..
    salam blogger

    ReplyDelete
  2. wkoko iya gan.. ane ilangin , biar ga terlalu leg

    ReplyDelete

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya vito minta maaf yg sebesar"nya jika komentar anda belum sempat dibales. ^^

Followers

Lagi Naik Daun