1. Login blogger
  2. Rancangan, Tambah Gadget,
  3. dan Pilih Html/java script
  4. Simpan kode CSS 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(){

    $(".gbbtn").click(function(){
        $("#gbcontent").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });


});
</script>
<style>
/* ---------------
Fixed Guestbook Slide effect with jQuery
by  : Dadang Herdiana
Url : http://dadhang.blogspot.com
---------------------------------- */
.gb {
position:fixed;
top:0px; left:0px;
z-index:+10;
}
#gbcontent {
        height: auto;
        background: #898787;
        width: auto;
        display: none;
    padding: 10px;
    border: #000;
    -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;
 
    -webkit-border-bottom-left-radius:10px;
}
.gbslide {
    float:left;
    margin: 0;
    padding: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8WS133PeB4SjlRodc-sqfs35vfbqbSIFfpn2pli86H46sIb60nEC47Nkswu2iEwVpYCy9qxI7d78tbhZa2kjUoDfMCCesYPedtfV-HzxzS51-VM2DLIiO6GkQY6tMoCL-SqF9FXhgkGo/s1600/gbslide.png) no-repeat center top;


}
.gbbtn {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwqF3idO1Rc6KW9090JHWBjqvrocMMnSFo1xcT6nve_92QVrzOCoT4XJUuFQ8IcmayW2PKwZW4S6l8mkLxLw0U0Shcrja3FkUEIfiVPZUJ-XKQJHaifLohODFIuJvupb0acABenj69YE/s1600/button-Close-open2.png) no-repeat right -45px;
    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: #CCC;
    text-decoration: none;
}
.active {
    background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">

<!-- Simpan Kode buku tamunya disini -->

</div>
<p class="gbslide"><a href="#" class="gbbtn">Guestbook</a></p></div>
5. Simpan dan lihat hasilnya. semoga berhasil dan bisa bermanfaat, maaf kalau ada kekurangan karena masih tahap percobaan, saya tunggu kritik dan sarannya untuk memperbagus menu Guestbook ini yng merupakan kelanjutan dari menu pada Buku Tamu Slide effect with jQuery 
Catatan: jik sudah ada script jquery, script jquery yang diberi warna biru tak perlu ditambahkan. :)

Posting Komentar

[Mulai Senin, 30 Januari 2012] Maaf, Jangan Masukkan Link Pada Komentar

handapeunpost