TIP MEMBUAT BUKU TAMU YANG ELEGAN TERSEMBUNYI

Kali ini saya ingin berbagi pengetahuan bagaimana cara membuat buku tamu yang tersembunyi secara elegan dan mengurangi bebanloading page(pemunculan halaman website). Walaupun sudah banyak yang mempostingnya, namun saya yakin masih bisa bermanfaat untuk sobat blogger semua, terutama yang masih pemula seperti saya.

Caranya sangat mudah,


1. Silahkan sobat blogger membuat akun Cbox terlebih dahulu di http://cbox.ws

2. Kemudian klik sign up. Isi formulirnya.

3. Setelah akun sohiba jadi. Klik publish.

4. Maka akan muncul kode Cbox yang harus sohib masukkan.

5. Setelah mendapatkan kode di Cbox tadi sobat blogger masuk ke akun blogger sobat.

6. Klik menu Tata Letak, terus klik tambah gadget,Edit HTML / Java script.

7. Setelah muncul halaman baru,copy script dikotak bawah ini dan pastekan.

8. Pada tulisan berwarna hijau, sohib ganti dengan kode Cbox yang tadi sobat blogger bikin tadi.

9. Simpan dan lihat blog sohib.
<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 #0000FF;
background:;
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">
KODE CBOX SOBAT BLOGGER
<br/>
[ CHAT ]
/><br/>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Semoga postingan ini bermanfaat buat sobat blogger semua.....
Jangan lupa buat LIKE nya sebelum meninggalkan halaman ini ...