Pages

Jumat, Desember 10, 2010

Cara Membuat Buku Tamu Bergerak Melayang

Cara Membuat Buku Tamu Bergerak MelayangTeras Info - 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/AVvXsEi8uJXCwPVEogFPxpoMMVntvuITZTPYCB7Dl8e5U98VJKrfIEL924QHiIUhTxKDmmvNKzP4GCExBuGk3KlD-3hI8RYSmojEAQ8ci3GPV1zIOUrDMAkQOOY02Iq71echJEPwTU5giKhPE9bF/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">Teras Info</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...

22 komentar:

  1. Kemarin saya dah sempat make, tapi skrg udah nggak :)
    tapi ijin save lagi ya... kalau suatu saat saya mau pasang yang ini saya tinggal nyari filenya :)

    Makasih

    BalasHapus
  2. makasih mas, yang melayang memang keren, kek superman.. hehehe

    BalasHapus
  3. pernah masang tapi cabut
    lagi gara2 ribet kata salah seorang teman.
    Met akhir pekan sodaraku

    BalasHapus
  4. keren bisa ngirit area sidebar

    BalasHapus
  5. Wah, sayang nya Denuzz gak make aplikasi buku tamu seperti itu. :D
    tapi keren loh kalo buku tamunya melayang-layang gitu... Asal gak mengganggu konten dan kenyamanan pengunjung saja...

    Salam BURUNG HANTU... Cuit... Cuit... Cuit...

    BalasHapus
  6. wah mantap ni sob boleh dicoba kayaknya ,,,ijin copas

    BalasHapus
  7. whehe mantap deh :D
    tapi kayaknya gue kurang tertarik. malah gue mau ilangin buku tamu gue, hehe :p
    salam MM1 :D

    BalasHapus
  8. aku juga pernah pasang... Tapi kucabut lagi..
    Kurang praktis buat yg onlen pake hape.. Heuheuheu :D

    BalasHapus
  9. السلام عليكم ورحمة الله وبركاته
    ——
    Dulu pernah coba,,tapi bikin blog jadi hang..akhirnya pke yg simple ajah di taruh di sidebar.,....

    Nice info mas...
    ——

    صَلَّى اللّهُ عَلَى مُحَمَّد – صَلَّى الله عَلَيْهِ وَسَلَّم

    BalasHapus
  10. Salam sahabat Common Cyber
    *****************************
    Nice tips mas,tp sayang gak bisa dipraktekin di CC,,CC tampak sudah begitu berat dan penuh..

    ^^

    BalasHapus
  11. gak ngerti qu .. ntar kacau semua ..

    salam :)

    BalasHapus
  12. kalau untuk WP ada mas? saya mau buat jg..
    tp berat gak ya?

    BalasHapus
  13. Boleh juga informasi ini untuk dicoba.

    BalasHapus
  14. cukup bagus buat menghemat tempat, thanks sob :D

    BalasHapus
  15. wah keren nih sob, pernah juga tak pasang di blog aq sob

    BalasHapus
  16. mantab nich artikelnya, sekalian tukeran link ya sobat. link sobat udah di pasang...

    BalasHapus
  17. makasih banyak info ne ....manpfaat banget buat ku yg newbie

    BalasHapus
  18. Menarik sekali bos, dapat menjadikan blog lebih menarik...salam kenal...

    BalasHapus
  19. Assalamu alaikum.
    Terima kasih atas pencerahannya.
    Akan kami coba.
    Semoga semakin hebat.

    BalasHapus
  20. mksih bang bro tas ilmunya ijin kopas ya...

    BalasHapus