Sunday, June 13, 2010

Cara Membuat Buku Tamu Animasi Otomatis Berada Di Samping Layar

Postingan kali ini akan membahas tentang bagaimana membuat buku tamu animasi yang berada disebelah kanan page blog. Bagi teman-teman bisa melihat contoh bagaimana buku tamu yang dimaksud adalah seperti buku tamu yang saya pakai sekarang ini.hehehe.

Caranya mudah sobat hanya mengikuti langkah di bawah ini:

1. Log in ke blog
2. Pada Dasbord Pilih Menu Rancangan (Tata Letak)
3. Pilih Tambah Gadget
4. Pilih HTML/Java Script.

5. Kemudian Copy kode di bawah ini, pastekan di Kotak Tambah Gadget HTML/Java Script tersebut.

<style type="text/css">#gb{
position:fixed;
top:25px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://farm3.static.flickr.com/2771/4442306534_c1431ea4ce_o.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #1300F2;
background:#FFFFFF;
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 KODE BUKU TAMU DISINI

<a href="javascript:showHideGB()">
</a></div>
<div style="text-align:right; font-size:xx-small;">Cara Buat Buku Tamu <a href="http://jaringanilmupengetahuan.blogspot.com/2010/06/cara-membuat-buku-tamu-animasi-berada.html" target="blank">disini</a> 
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6. Pilih Simpan.

Oya, klw sobat belum punya kode buku tamunya, sobat bisa mendaftar terlebih dahulu di 
http://cbox.ws

2 comments:

  1. bro, paste ke html nya itu asal paste aja ato ada aturan letaknya??

    ReplyDelete
  2. @adh22play

    ia tinggal paste sj, trus ditulisan "MASUKAN KODE BUKU TAMU DISINI" diganti dengan kode HTML buku tamu sobat. Oya judul tidak perlu, kemudian simpan.

    ReplyDelete