membuat buku tamu terselip di samping blog

Dalam postingan kali ini kita akan belajar bagaimana cara membuat buku tamu diblog, tapi buku tamu yang akan kita buat bukan seperti biasanya tapi sekarang kita akan belajar membuat buku tamu yang terselip di di samping blog kita seperti di blog ini loh..>>>
tapi sebelumnya saya ucapkan pada kang Chukie_Chukie karna artikel ini saya kutip dari blog beliau. Biar gak kemalaman Baiklah sekarang saya akan jelaskan bagaimana caranya membuat buku tamu terselip di samping blog:

1.      Masuk Ke Blog anda > Dasbor 

2.      Pilih Rancangan > Tambah Gadget > HTML/JavaScript

3.      Lalu Copy-kan Code di bawah ini :

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height  :300px;
width   :300px;
float:left;
cursor:pointer;
background:url('http http://i1193.photobucket.com/albums/aa349/ipoung391/bukutamuku2-1.jpg')
no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
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">
<div>
<span class="Apple-style-span" style="font-size: x-small;">Tinggalkan Pesan Anda di Sini!</span>
</div>
<span class="Apple-style-span" style="font-size: x-small;">SELAMAT DATANG DI BELAJAR BLOGGING</span></a>

<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="ipung391" src="http://www.shoutmix.com/?ipung391" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?ipung391">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 -->

<div>
<span class="Apple-style-span" style="font-size: x-small;">
</span></div>
<br />
<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>

4.      Silahakan beri nama sesuai keinginan anda pada kolom Judul

5.      Kemudian pada Tulisan yang berwarna violet silahkan ganti dengan code Shoutmix anda sendiri

6.      pada Tulisan yang berwarna merah silahkan ganti dengan tombol yang sudah anda upload di photobucket, tetapi anda bisa juga menggunakan sepeti yang ada di blog ini.

7.      Lalu tulisan yang saya beri warna hijau itu adalah ukuran untuk tombol buku tamu, anda bisa kreasikan sendiri.

8.      Jika sudah klik Simpan,

9.      selesai sudah