...cara membuat buku tamu buka tutup melayang...

sebagian besar para blogger meletakkan buku tamunya dengan cara buka tutup dan melayang, yaitu akan muncul bila di klik. alasan utamanya agar hemat tempat..

langsung saja caranya:

login ke blog anda kemudian pilih rancangan.
klik edit pada gadget buku tamu anda.

(yang belum punya buku tamu silahkan baca artikel saya tentang cara mudah membuat buku tamu atau guest book )

copy code di bawah:

<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('https://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">

KODE BUKU TAMU ANDA

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://xballforever.blogspot.com/2012/01/cara-membuat-buku-tamu-buka-tutup.html">
sini
</a>

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

ket: pada KODE BUKU TAMU ANDA , ganti dengan kode buku tamu anda,
sehingga hasilnya menjadi:

<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('https://sites.google.com/site/ojel88/_/rsrc/1281597152186/home/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="247" height="291" src="http://www6.cbox.ws/box/?boxid=637781&amp;boxtag=p816f8&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-637781" style="border:#000000 1px solid;" id="cboxmain6-637781"></iframe></div>
<div><iframe frameborder="0" width="247" height="89" src="http://www6.cbox.ws/box/?boxid=637781&amp;boxtag=p816f8&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-637781" style="border:#000000 1px solid;border-top:0px" id="cboxform6-637781"></iframe></div>
</div>
<!-- END CBOX -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://xballforever.blogspot.com/2012/01/cara-membuat-buku-tamu-buka-tutup.html">
sini
</a>

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

teks yang berwarna merah adalah kode buku tamu saya, ganti dengan kode buku tamu anda sendiri..

sekian semoga bermanfaat..