Cara Membuat Buku Tamu Pada Blogspot

Cara Membuat Buku Tamu - Buku Tamu adalah sarana untuk menjalin komunikasi antara pengunjung. Dengan mempunyai buku tamu maka kita bisa memantau kunjungan maupun saling berbagi sapa. Sebenarnya trik ini sudah lama ada. Tetapi karena ada beberapa sahabat yang memintanya, berikut saya kasih trik untuk membuat buku tamu yang mempunyai efek floating.

Berikut adalah caranya :

1. Login ke dashboard Blogger sobat

2. Tambahkan sebuah gadget. Pilih HTML/JavaScript

3. Masukkan coding berikut ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu sobat -->


<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

4. Simpan lalu lihat hasilnya

Nah...cukup mudah sekali bukan. Semoga tips ini membantu sobat - sobat sekalian