Cara Membuat Buku Tamu Melayang Di samping Blog

Cara Membuat Buku Tamu Melayang Di samping Blog, untuk menambah kelengkapan pengunjung blog agar bisa meninggalkan pesan atau mengenlkan blognya ,mungkin anda termasuk pemilik blog yang ingin menambahkan widget buku tamu seperti di blog saya ini. Mungkin kalian ingin menghemat kolom pada blog  contoh cbox yang sudah terpasang bisa lihat disini  agar tidak terpenuhi dengan widget - widget atau aksesoris blog, maka kalian bisa membuat widget buku tamu melayang di samping blog. Caranya sebagai berikut : 

1. Daftar untuk mendapatkan script Buku Tamu Anda di Cbox

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
3. Cari dan pilih HTML/Javascript;

4. Tambahkan script 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_D2LrYQjBliCRCRXkuVPm-qREtlCDePCsJTw9RW-y30oqo0bIiCGPcq2WEfGfZjq7CwZluO0MgVWrpKE8AJwF8wrHzmc3ZPXoMbW4OtYazE6SGuUC1PZP7_3svhlXf6onU3oesqIuWiNk/') 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">

<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->

<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 200px; font-size: 0; line-height: 0;">

<div style="position: relative; height: 300px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0px solid;"><iframe src="http://www2.cbox.ws/box/?boxid=2379574&boxtag=ve2s1f&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain2-2379574" id="cboxmain2-2379574"></iframe></div>

<div style="position: relative; height: 80px; overflow: hidden; border: 0px solid; border-top: 0px;"><iframe src="http://www2.cbox.ws/box/?boxid=2379574&boxtag=ve2s1f&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform2-2379574" id="cboxform2-2379574"></iframe></div>

</div>

<!-- END CBOX -->

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

</div>

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

Catatan kode yang berwarna biru silahkan ganti dengan kede cbox anda
untuk mendapatkan kode cbox silahkan daftar gratis disini