Membuat Buku Tamu Blog Buka Tutup

Salam kawan-kawan. Kali ini saya akan memberikan tips sederhana lagi. Tips kali ini adalah bagaimana cara membuat buku tamu blog kita agar bisa buka tutup. Biasanya buku tamu hanya di tempelkan saja di halaman blog. Tapi dengan sedikit tambahan script, maka buku tamu kita akan kelihatan lebih keren dan elegan. Script yang ada ini juga tidak hanya untuk buku tamu saja, kawan-kawan juga dapat menggantinya dengan gadget yang lain seperti gambar atau lainnya sesuai dengan keinginan kawan-kawan.

<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://i1211.photobucket.com/albums/cc427/aerzrock/tabs.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #047df8;

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">

<br/>

Mau buku tamu seperti ini kawan?

<br/>

Klik ini

<a href="http://cukibee.blogspot.com/2012/04/membuat-buku-tamu-blog-buka-tutup.html">

sini

</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>