Membuat Buku Tamu/Cbox Nempel di Sebelah Kanan Blog

Membuat buku tamu nempel atau atauhide di bagian samping blog merupakan salah satu cara menghemat sidebar blog. Buku tamu ini akan tersembunyi dan hanya terlihat tulisan buku tamu saja pada bagian samping blog. Buku tamu akan otomatis tampil setelah anda mengklik tulisan 

'Buku Tamu" tersebut. Berikut cara lengkapnya...

1. Sign in ke blogger dan silahkan Login dengan Account Anda



2. Pilih Layout/Tata Letak



3. Pilih Page Elemen/Elemen Halaman



4. Klik Add a Gadget/Tambah Gadget



5. Lalu pilih "HTML/JavaScript" dan copykan code script di bawah ini :

Script:

<style type="text/css">

#gb{

position:fixed;

top:20px;

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/AVvXsEjo2azqEiSECjxMwCQjzBETEcyy5PoF599MyEGmJ-bMYH7kzdChkOVr_Gu01Yd0P_EqFXkZjRfRMnQtUvGHlRx-Ip8j_cDpKw1RBDx0Vm4H_5ufT38bR5VaDU7uc-PPZiF2VtIN0v-UdD4/s1600/bukutamu.png') no-repeat;

}

.gbcontent{

float:right;

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



<center>

<!-- BEGIN CBOX -->

DISINI KODE CEBOX/BUKU TAMU ANDA DI SIMPAN

<!-- END CBOX -->

</center>



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

<a href="http://iwan-ingin-berbagi.blogspot.com/2012/08/membuat-buku-tamucbox-nempel-di-sebelah_25.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>

6. Ganti tulisan yang berwarna biru dengan code cbox/buku tamu anda

7. Simpan dan lihat hasilnya.

Semoga tips di atas bisa bermanfaat buat teman-teman sekalian. Makasih dan sampai jumpa di tips selanjutnya.....