Buku Tamu Slide Effect With Jquery.

Banyak Orang Nanya2 sama gue cara buat buku tamu macam yang di atas, dan terpikir untuk di share aja...

Tanpa Bacod Lagi, caranya :

1.Buat dulu C-box mu  KLIK SINI , tapi kalo uda ada gak usah.

2.Masuk ke blogger kalian.

3.Buat Post Baru, Kemudian Buat judulnya "GUEST BOOK" seterah apa yang mau kalian buat.

4.kemudian klik HTML yang ada di pojok kiri itu, kalo gak tau lihat gambar di bawah.

KLIK UNTUK MEMPERJELAS.

5.kemudian Pastekan Kode Di bawah ini, di bagian HTML itu.

<div  style="-moz-border-radius:10px; border-radius:10px; padding:10px;  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-J1OxwNNi_W6fYDAosQ3Qap36rnWKPmqwlAzHNKxpqRyuw5sllMu3PHsJLGenTDnfgwkPIoafSkZyfIOsp-JjU5HoD4pMoHJU8m2o2otIlsOHtBpMZjiVg2DvxF-JFqHbng2TE90Ehm0/s1600/biru70.png);"><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/AVvXsEgw6pt-7NBIYrDzzTRVrUJRswKwwbAOOgayY3AN6fr63kVzJXfzJF9B7-ewxlfMER-OleunKYGJ2oG-Dc4zXPwXt3m6acTWmqMeNY7f7AYJaZaVfDukpd3ZnxyvkEfn4whYJHlxFW3QaRM/s1600/btn-slide.png) no-repeat center top;   }.btn-slide {    background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpxy7pQ8m0T-ComOdCH_TalxNuJys_voqYlkQXD3G0X1lrPW4F-OW1DED-PDRsj-udYQl9Lei2B5gCsoYeTpW7pUCjs6nOZkJmGUJBizFz31gwVaJ67nevPtyet1sAnBm7qbp8eDwuBA/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">
    <!-- Taruh Script Buku tamunya disini -->
</div><p class="slide"><a href="#" class="btn-slide">Gues Book</a></p></div>

6.Kode yang berwarna hijau itu adalah Scrip Buku Tamu Kalian.

7.Kalo rasanya uda selesai, simpan dan lihat hasilnya.

Sekian Post Hari ini.

SAT-CYBER