Membuat buku tamu melayang dari atas

Hei sobat blogger emmm trik kali ini saya akan share tentang cara membuat buku tamu melayang dari atas trik ini aku ambil dengan cara memanfaatkan jquery dengan sedikit sentuhan css3 yang bikin makin ajib tampilannya.

1. Tambah Gadget HTML/Javascript dan masukan semua kode di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
$('.s').click(function(){
$('.sinFolz').animate({top:'50px'});
});
$('.tutup').click(function(){
$('.sinFolz').animate({top:'-2000px'});
});
});
</script>

<style type="text/css">
.sinFolz{
width:200px;
background:#F1E5CA;
padding:15px;
position:fixed;
top:-1000px;
left: 40%;
border:4px solid #DFC986;
z-index:1111;
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
}
.sinFolz span{
position:absolute;
top:-15px;
right:-10px;
-webkit-border-radius:100px;
   -moz-border-radius:100px;
        border-radius:100px;
background:red;
width:20px;
text-align:center;
cursor:pointer;
font:bold 14px/20px Arial, sans-serif;
color:#080B0E;
border:2px solid #11110D;
-webkit-box-shadow:0 0 2px black;
   -moz-box-shadow:0 0 2px black;
        box-shadow:0 0 2px black;
}
.s{
background:#d5cea6;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#d5cea6,0),color-stop(#c9c190,0.4),color-stop(#b7ad70,1));
background:-webkit-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background:   -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background:     -o-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background:        linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70));
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 );
display:block;
text-align:center;
padding:5px 5px;
width:150px;
margin:10px auto;
cursor:pointer;
border:2px solid #868163;
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
font:bold 15px/20px Arial, san-serif;
text-transform:uppercase;
}
.s:hover{
background:#FFD65E;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#FFD65E,0),color-stop(#FEBF04,1));
background:-webkit-linear-gradient(top, #FFD65E 0%, #FEBF04 100%);
background:   -moz-linear-gradient(top, #FFD65E 0%, #FEBF04 100%);
background:     -o-linear-gradient(top, #FFD65E 0%, #FEBF04 100%);
background:        linear-gradient(top, #FFD65E 0%, #FEBF04 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFD65E), color-stop(100%,#FEBF04));
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 );
}
</style>
<div class='sinFolz'>

Disini isi dengan kode buku tamu anda

<span class='tutup'>X</span>
</div>
<span class="s">Isi Buku Tamu</span>
<div class='clear'></div>​

Jika di template anda sudah ada jquery maka gak usah lagi Copy kode jquerynya cukup kode yang di bawahnya saja.