TIP BUAT BUKU TAMU YANG ELEGAN TERSEMBUNYI

Buku Tamu Tersembuyi

Kali ini saya men-share-kan bagaimana membuat buku tamu yang tersembunyi secara elegan dan mengurangi beban loading page (pemunculan halaman website). Walaupun sudah banyak yang mempostingnya, namun saya yakin masih bisa bermanfaat untuk sohib Pandawa Lima. 
Dan hasilnya, menurut saya sangat bagus dan bisa mengurangi ruang halaman blog sehingga bisa dimanfaatkan untuk yang lainnya. Semisalnya space untuk iklan. Mudah-mudahan ada yang berminat ya...


Caranya sangat mudah, yaitu sohib tinggal menambahkan kode script yang ada di dalam kotak berikut :

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

kedalam gadget Buku Tamu sohib dan menyisipkan kode script Cbox kedalam script diatas yaitu menggantikan tulisan yang berwarna merah.

Kalau sohib belum ada akun Cbox, berikut caranya :.

1. Silahkan sohib buat 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.

Tetapi sebelum kode itu sohib copy sohib harus menambahkan gadget baru pada blog sohib,Klik rancangan-edit tata letak-Tambah Gadget-Tambahkan HTML atau Javascript. Dan pastekan kode scrip diatas.

5. Pada tulisan berwarna merah, sohib ganti dengan kode Cbox sohib tadi.
6. Simpan dan lihat blog sohib.

Semoga bermanfaat..
PANDAWA LIMA

Sumber :
Mbah Google....
http://gumanta-info.blogspot.com