Wednesday, June 09, 2010

Gadget Buku Tamu Melayang



Gadget buku tamu melayang yaitu buku tamu yang melayang diatas halaman blog kita, ada tab dengan tulisan buku tamu kalau mau ditampilkan tinggal klik tabnya maka buku tamunya akan muncul.

Caranya sebagai berikut :

1. Login ke blogger > tata letak > elemen laman > tambah gadget > html/javascripts.

2. Copas kode dibawah ini ke dalam gadget html/javascripts tadi.
<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #FFFFFF;
background:#FAFD03;
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">

Paste kodenya disini

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>
Ket.
Merah, gantilah dengan kode gadget buku tamu yang akan kamu tampilkan, misalnya kode gadget Shoutmix.

border, warna pada border konten
background, warna pada isi konten.

4. Simpan dan lihat hasilnya.


Selamat Mencoba.