Membuat Buku Tamu Melayang di blog

Postingan kali ini akan membahas cara membuat buku tamu yang melayang di Blog kamu.

tapi sebelumnya kamu harus punya shoutmix nya dulu.

Untuk membuat Shoutmix kunjungi http://www.shoutmix.com/main/

setelah masuk kamu Klik "Create Shoutbox" kemudian isi form yang tersedia, 

centang tulisan "I have read and agree to the Terms of Service." > Continue.

setelah itu kamu cari "Control Panel" dan "Get Code"..

atur ukurannya. Disini saya pakai Weight:200 Height:300.

Copy Script yang ada dibawahnya dan simpan dulu di Notepad.

Sekarang Script Shoutmix kamu udah jadi.

Nah,. cara membuat Buku tamu melayangnya :

Biasa,.. Rancangan > Elemen Laman > Tambah Gadget > HTML/JavaSript.

Copy Paste Script Dibawah ini kedalamnya.

<style type="text/css">
#gb{
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:150px;
width:100px;
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="bulesang" src="http://www.shoutmix.com/?bulesang" width="200" height="300" frameborder="0" scrolling="auto">
<a href="http://www.shoutmix.com/?bulesang">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/>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Kalau kamu punya gambat URL lain, kamu bisa rubah teks yang berwarna Hijau.

Teks yang berwarna Kuning kamu ganti dengan Script Shoutmix tadi.

Simpan, Selesaaiii,...

Saran :

Untuk memaksimalkan bentuk tampilannya, sebaiknya kamu taruh Gadgetnya ditengah laman blog kamu. Buat contoh dibawah laman posting (kalau Laman postingan kamu ada ditengah).