Cara Membuat Buku Tamu Melayang | Versi 2

 Jika kemarin saya sudah pernah menulis artikel "Cara Memasang Buku Tamu Melayang" mungkin untuk artikel kali ini sama dengan artikel yang sebelumnya, tapi mungkin beda versi ya sob, artikel ini saya dapatkan dari "Impian Relugais12" ya, tapi dengan sedikit perubahan lah sob, ga asik kalo copas artikel punya orang.

Sebagai blogger yang baik, ya sebaiknya kita menulis artikel dengan cara kita sendiri sob.
yadahlah, dari pada lama-lama basa-basi langsung aja bisa di cek sob.
*nb : contoh bisa dilihat pada buku tamu blog ini

1. Loginlah dulu di Blogger >Rancangan > 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:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:110px;
float:left;
cursor:pointer;
background:url('http://i915.photobucket.com/albums/ac357/adiluvdv/buku-tamu_03.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"> <!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="gaga12" src="http://www4.shoutmix.com/?gaga12" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www4.shoutmix.com/?gaga12">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->
<br/>
Anda berminat buat Buku Tamu seperti ini?<br/>
Klik di
<a href="http://knight-xp.blogspot.com/2011/04/cara-membuat-buku-tamu-melayang-versi-2.html">
sini </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>

Contoh di atas adalah 'Widget Melayang Shoutmix'

Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..
Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. 
Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..

4. Simpanlah dan Selesai deh... 
namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.. 
Untuk melihat hasilnya silahkan Refresh,reload tab,atau tekan f5 pada  blog kamu.. Mudahkan..

Selamat Mencoba
Para Sobat Sekalian