Fixed Guestbook Slide effect with jQuery V2
Untuk demonya bisa dilihat disini
saya ubah biar lebih Familiar dikalangan blogger.
- Cara membuatnya :
- Login blogger
- Rancangan, Tambah Gadget, Html/Java Script
- 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. :)
Show
0 Comments
prev
next