Cara Membuat Buku Tamu Melayang di Sebelah Kanan

Sahabat kehidupanku, kali ini admin pengin berbagi ilmu tentang membuat buku tamu melayang di sebelah kanan. Tulisan ini saya maksudkan untuk memudahkan diriku sendiri dalam mengingat kembali cara membuat buku tamu melayang di sebelah kanan, ibarat buruan maka tulisan ini saya anggap sebagai pengikat. Yang kedua adalah untuk berbagi siapa tahu ada yang membutuhkan tutorial membuat buku tamu melayang di sebelah kanan ini. Artikel ini saya dapat dari ABEL BLOG’S ketika menjelajah dan bertanya sama mbah google.

Okey deh langsung saja kita ke praktiknya.

1. Tentunya harus punya akun Cbox
2. Ketika belum punya akun Cbox maka registrasi dulu untuk membuat akunnya
3. Jika sudah terdaftar maka edit Cbox anda dan copy Html nya di pastekan dengan mengganti tulisan “Silakan Pasang Kode Buku Tamu yang sudah di copy tadi di Sini” dengan kode html Cbox anda pada kode di bawah ini.

Lnagkah selanjutnya Copy pastekan kode Html di bawah ini dengan cara menamabah gadget Html dengan masuk ke akun blogger.

Kemudian masuk ke tata letak dan tambah gadget Html. setelah itu klik save.

<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/AVvXsEiTU0P_BZmumXyTEM-8MdYVebXUmKpzApZ_AT218BhQdN_h9-H5kcPP3oX1S1W7S3QwH_pBSflEUuDFI9vBsqmkfJFqf9SkkGsL3YOLG3s64Mo2QFr7_o4PA4JoaoNJSXXbjcGMwzOPfgQ/s1600/bukutamu.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">
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://abelavriyanno.blogspot.com/2012/04/cara-membuat-buku-tamu-melayang-di-sisi.html">[get this widget]</a>><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></div></div>

Demikian tutorial cara membuatbuku tamu melayang di kanan blog. Selamat mencoba dan semogab bermanfaat.

Terima kasih ABEL BLOG’S.