Cara Membuat Buku Tamu Bergerak Melayang

Alif Ilmu - Mungkin cara membuat buku tamu yang bisa bergerak melayang ini sudah bukan hal baru lagi, tapi, mungkin saja diantara teman-teman semua ada yang belum tau. Jadi saya putuskan untuk berbagi trik bagaimana caranya membuat buku tamu yang tidak biasa, yaitu buku tamu yang bisa bergerak melayang.

Ok, langsung saja, terlalu banyak basa-basi, takut basi beneran lagi..he..he...

1. Pertama-tama, masuk dulu ke halaman rancangan pada blog kita, kemudian pilih elemen halaman.

2. Kemudian, tambah gadget pada blog kita, dengan cara klik pada tambah gadget. Pilih html/java script.

3. Setelah itu, silahkan copas (copy Paste) kode berikut ini dan masukkan pada bagian Mengkonfigurasi HTML/JavaScript.

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_JqPGfZ62FGBlQUKY4jnML0N3urpHFxxz1QtrDMtWFbugblYjqEAVjz0Vqb7rnekXQc6nkHUG6L-cWZQlg6303089BH2B38G9LBDKVaVmIoVZNAqD1OxLT8GqM0wlIXxqXu0OxLraWfGm/s128/345o85i.gif') no-repeat;
}
.gbcontent{
float:left;
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">
SILAHKAN PASANG KODE SHOUTBOX/BUKU TAMU ANDA DISINI.....

<br/>
Silahkan isi buku tamu disini....<br>
Created by:
<a href="http://teras-info.blogspot.com">Alif Ilmu</a>

<div style="text-align:right">
<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>

Pada bagian kode yang saya beri tanda cetak tebal "SILAHKAN MASUKAN KODE SHOUTBOX/BUKU TAMU ANDA DISINI", silahkan masukan kode buku tamunya. Jadi sebelumnya kita harus mendaftar dulu ke situs penyedia layanan shoutbox/guestbook. Untuk saya sendiri, disini saya menggunakan layanan dari Cbox, bagi yang berminat menggunakan layanan Cbox, silahkan langsung saja klik disini. Tapi, bagi kita yang ingin menggunakan layanan lain silahkan, misalnya seperti shoutmix, Ogix, MyShoutbox. Tidak ada undang-undang yang melarang anda untuk menggunakannya.

Setelah selesai melakukan langkah-langkah diatas, klik simpan.
Kemudian silahkan lihat hasilnya.

sebagai contoh, bisa dilihat pada blog ini. Perhatikan sebelah kanan pada sidebar blog ini, ada bacaan "Buku Tamu". Itulah hasil yang akan diperoleh dari trik membuat buku tamu bergerak melayang ini.

Selamat mencoba...