Cara Membuat Buku Tamu jQuery Blog

Cara Membuat Buku Tamu - kita tentunya sering liat blog yang punya hidden buku tamunya biasanya terletak disebelah kanan blog. ok pada postingan kali ini sharing akan berbagi tutorial tentang Cara membuat buku tamu. cek dis out :

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

    <!-- 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. sudah jadikan Buku Tamu nya.? gimana tutorial Cara membuat buku tamu jQuery Blog ? mudahkan? jangan lupa baca juga Cara Membuat Recent Post


1 Responses to “Cara Membuat Buku Tamu jQuery Blog”

Post a Comment