Thursday 31 May 2012

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 

0 comments:

Post a Comment