-->
© 29-Nov-2011
About the Author
11:18 WIB
Snippet

Fixed Guestbook Slide effect with jQuery V2

Untuk demonya bisa dilihat disini

masih dalam keadaan berduka cita karena kangdadang.co.cc atau jelasnya domain co.cc sudah tidak terindeks google, dan sekarang kembali ke domain asal yang belum banyak terindeks, efek nya visitor sepi, alexa pun menurun. terus cape juga habis kegiatan di kampus 4hr belakangan(Curhat), tapi gak apalah yang penting saya tetap mau berkreasi buat sesuatu yang baru dan semoga menjadi hal yang bermanfaat juga. sebenarnya menu guestbook ini merupakan penyempurnaan dari menu guestbook sebelumnya Fixed Guestbook Slide effect with jQuery
saya ubah biar lebih Familiar dikalangan blogger.



    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Tambah GadgetHtml/Java Script
  3. Dan Simpan 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(){

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

 
});
</script>
<style>
/* ---------------
Fixed Guestbook Slide effect with jQuery II
by  : Dadang Herdiana
Url : http://tip-triksblogger.blogspot.com
---------------------------------- */
.gb {
position:fixed;
top: 0px; right:450px;
z-index:+1000;
}
#gbcontent {
    height: auto;
    background: #898787;
    width: auto;
    display: none;
    padding: 10px;
    border:2px solid  #4173af;
    background:#ffffff;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    padding:10px;
}
.gbbtn {
    position:fixed;_position:relative;top:50px; right:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight)
}
.active {
    background-position: right 12px;
}
</style>
<div class="gb">
<div id="gbcontent">

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

</div>
<div id="gbbtn"><a href="#" class="gbbtn" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSdFyK3nJfKiP6CNW3veYDAdm39wPS9N0aED9-Xi6Bgqgmd7DwDYq0Do-WCuIa63KPprdYTQv3msy5MfaflVWOVW8VIsT3Qk49-vg7faUt_KpYQT8F1cHve3O3rSDAf-V74H2JE7Q9TJ4/s1600/Guestbook.png" border="0" /></a></div>

4. Simpan dan lihat hasilnya
 semoga bermanfaat dan jangan lupa jika kode jquery nya sudah ada, tak usah diberi kode jquery lagi (kode yang berwarna biru). terkadang guestbook ini tidak berfungsi di template-template lain. jadi semoga beruntung. :)

Leave a Reply