Cara Buku tamu cBox popUp (hilang-muncul) di sisi kanan

Seperti artikel sebelumnya Membuat buku tamu dengan cbox, cBox merupakan salah satu gadget untuk digunakan fasilitas buku tamu. Akantetapi jika buku tamu di muat dalam kolom web akan menghabiskan tempat yang sangat panjang, apalagi bagi web yang pengunjung dan komentarnya banyak. Namun disisi lain buku tamu memang sangat penting kegunaannya untuk mengetahui masukan dari pengunjung web . 

Artikel kali ini mastertricks akan membahas tentang "bagaimana cara pemasangan cBox yang praktis" agar tidak menghabiskan kolom dalam web atau blog yang nantinya akan menganggu desai web dan kecepatan tampilan pula.  Slah satunnya adalah dengan cara mengaplikasikan cBox dengan sistem popUp  (hilang-muncul) baik itu dikanan-kiri maupun atas-bawah web. Dan inilah trik mastertricks shobat.

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 :

<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('http://2.bp.blogspot.com/-mrsZX_-WDkk/Te5tiGXpqNI/AAAAAAAAAZg/hDLjMWDN6_U/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>

5. Ubalah tulisan yang berwarna Biru dengan code cbox/buku tamu anda yang sudah shobat daftarkan sebelumnya.

6. Simpan dan lihat hasilnya. 

Semoga tips di atas bisa bermanfaat buat shobat mastertrick sekalian. Terimakasih dan sampai jumpa di tips selanjutnya....!!(red by :mastertricks)

Membuat buku tamu dengan cbox