Cara Membuat Buku Tamu Melayang

Repost... berhubung ada yang tanya lagi dan telah saya beri petunjuk kalau ada di dalam daftar tutorial blog..coba dicari lagi tapi katanya tidak ada ??..setelah saya lihat eh ternyata judulnya bukan buku tamu melayang melainkan CaRa BuaT WidGet MELAYANG di BLoG.. .. jadi wajar saja sobat blogger pada bingung?? cari di daftar tutorial blog saya ini tapi malah tidak ketemu..dan akhirnya malah tanya lagi.. tanya lagi ?... hehehe.. sory ya :))

Buku Tamu Melayang yaitu widget/gadget buku tamu yang seolah-olah melayang diatas halaman blog kita..yang memakai tab dengan tulisan buku tamu kalau mau ditampilkan kita klik tab buku tamunya maka buku tamunya akan muncul.. Contohnya seperti disini > websiteecak2.blogspot.com

Oke ..langsung saja simak caranya berikut ini :

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..
2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts 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 KODE BUKU TAMU DISINI YAA...<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></center></div></center></div></div></div>

Keterangan :

Merah = Gantilah dengan kode Scripts Widget Buku Tamu yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..

border = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)
background = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. Untuk melihat hasilnya silahkan Refresh blog kamu.. Mudahkan.. ;-)

Note :
> Width (Lebar) di kode scripts buku tamunya diatur "190" yaa.. ( width = 190 ) ..agar tampilan tab buku tamunya pas... kecuali kalau kamu ingin tampilan buku tamunya agak kelihatan sedikit... ya bisa diatur > 190 lebarnya..
> Biasanya jika sudah ada widget melayang lainnya diblog kamu kemungkinan bisa menyebabkan error..

Mari di isi Buku Tamunya yaa