Membuat Buku Tamu Blog Buka Tutup

Salam kawan-kawan. Kali ini saya akan memberikan tips sederhana lagi. Tips kali ini adalah bagaimana cara membuat buku tamu blog kita agar bisa buka tutup. Biasanya buku tamu hanya di tempelkan saja di halaman blog. Tapi dengan sedikit tambahan script, maka buku tamu kita akan kelihatan lebih keren dan elegan. Script yang ada ini juga tidak hanya untuk buku tamu saja, kawan-kawan juga dapat menggantinya dengan gadget yang lain seperti gambar atau lainnya sesuai dengan keinginan kawan-kawan.

Biar tidak kelamaan, langsung aja begini caranya. Seperti biasa ya kawan login di blogger dengan ID yang kita punya dan menambahkan gadged seperti biasa dengan cara:

* Klik menu Tata Letak atau Design setelah login
* Klik Elemen Halaman (Page Elements)
* Klik Tambah Gadged
* Klik HTML atau JavaScript
* Lalu Copy paste kode dibawah ini

<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://i1211.photobucket.com/albums/cc427/aerzrock/tabs.gif') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #047df8;

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

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]

<br/>

Mau buku tamu seperti ini kawan?

<br/>

Klik ini

<a href="http://aftanet.blogspot.com/2011/06/membuat-buku-tamu-blog-buka-tutup.html">

sini

</a>

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

NB:

*URL gambar bisa kawan ganti dengan gamabar kawan sendiri yang lebih bagus. Kalau yang standart itu bikinan saya sendiri.

*Ganti [MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI] dengan script buku tamu yang kawan punya.

* Setelah yakin anda benar memasukkannya lalu klik Simpan
* Lihat hasilnya deh.....moga manfaat ya kawan2...