Cara Pasang Buku Tamu Melayang

Apa manfaat Buku Tamu yang ada samping di side bar seperti melayang...? manfaatnya adalah untuk menghemat tempat agar tidak terlihat rame asesoris di blog kita, jika kita mau pasang buku tamu melayang yang cantik dan keren, ikuti tutorialnya di bawah ini

1. Silahkan anda Daftar terlebih dulu ke CBOX
2. Sign in ke blogger dan silahkan Login dengan Account Anda
3. Pilih Rancangan/Tata letak
4. Pilih Page Elemen/Elemen Halaman
5. Klik Add a Gadget/Tambah Gadget
6. Lalu pilih "HTML/JavaScript"
7. Kemudian Copy-Paste kode di bawah 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://i37.tinypic.com/345o85i.gif') 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">

LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI

<br/>
Anda ingin membuat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://jasabuatblogmurah.blogspot.com/">
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>

Itu aja, gmana keren kan...? Nah ini ada 1 lagi yang paling keren, cara pasang buku tamu Show / Hide Dari Atas Kebawah, cara pasangnya sama seperti di atas hanya tinggal di copi aja scrip yang ada di bawah dan jurus ini saya dapat dari hasil karya blog http://tip-triksblogger.blogspot.com

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
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;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">


<div class="gbcontent">

<!-- Script Chatbox nya disini -->


<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

</center></div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-400-gb.offsetWidth).toString() + "px";
</script>

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOibzKN_TGcR3cNqKqHPiU5xVanq0eR0x_eKXrQNB0TnQ9O90ttsjU9QOhSsaBL9uSDycT7PJ3gqXD2pbPXpgkVgXzhAQMhoIdaIf0QIs9V3U_u99yZJgW1SYvlsqvSASIRPG1_sS4hyphenhyphenw/s1600/Guestbook.png" border="0" /></a></div>
</div>