Cara Membuat Buku Tamu jQuery Blog

Cara Membuat Buku Tamu pada blog dengan menggunakan jquery ini sangat bermanfaat dan menguntungkan bagi sobat yang ingin "Membuat buku tamu", walau ada buku tamu tersembunyi yang kita daftarkan bisa melalui cbox atau shout mix , tapi kali ini lain dari pada yang lain guest book atau buku tamu ini kita pasang dengan menggunakan jquery sehingga tidak terlalu berat, oke tanpa basa basi berry blog akan langsung membahasnya :

-Log in ke blogger.com

-Pilih rancangan

-Pilih Add gadget

-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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDO2oOiYdiHnkG_rc7AuZnEBpCUJOG403WtVr2SOOiKRzubVVdR9iF1O1yN9aEujKRR1cha3RLv3LfWAaZw6Ui9CBl8B1ZmcHVIiHxTLi3-9O1PN3_fUzUO3LFhKE84ayRnJNP8AICfRo/s1600/btn-slide.png) no-repeat center top;

}

.btn-slide {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXk9lNFHPDpsEZx5_jI-6B4kr3wap6AKZV-IRzDynO9pWbvhhndGgs8eTjALI2H2rduAIYqthO7jaio4-cKoFKpSmoGVcgqBaAfikRdru_kt9QvWyOYLtUp0sLTN66o2_wvAKcvKpP4Yo/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">

    <!-- Letakkan kode buku tamu sobat disini -->

</div>

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

Warna biru ganti dengan kode buku tamu sobat  sedangkan warna ungu ganti dengan yang sobat inginkan

setelah itu save dan selesai lihat hasilnya...taraaaaaaaa..

jadilah buku tamu jquery , selamat menggunakannya sobat, demikian tutorial blogspot cara memasang buku tamu jquery blog di blogspot , semoga bermanfaat untuk sobat semua .

You May Like :

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn