How to Make A Floating Guest Book

This is my first English post in my blog in 2012. And this is post is a post I have ever posted before, but in Bahasa Indonesia. I have posted Bagaimana Cara Membuat Buku Tamu Melayang in Bahasa. And now, this is the english version. Anyone of you who don't know how to make a floating guest book? Or may be there is still who doesn't know what guest book is? You can see my guest book here. Floating guest book is quiet useful to minimize the space on your blog. Okay, we'll see directly.

The method is so simple, you just copy this code below in a widget. Still doesn't know how to make a widget? You can see here (in Bahasa Indonesia).

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;left:0px;z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red"><right>Close [X]</right></b></a></div>
<!-- KODE BUKU TAMU -->
</td></tr></table>
</div>
<script src="http://dl.dropbox.com/u/24368183/buku%20tamu%20fade%20out.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="http://dl.dropbox.com/u/24368183/CHATBOX.png" />
</a>
</div>

Explanation:

• For the red colored, you can set the position of your guest book. You can change top with bottom and left with right
• For the blue colored, you change them with your guest book HTML code. If you don't know how to get your guest book code, you can see here (in Bahasa Indonesia).
• For the green colored, you can change that with your picture url code. It's up to you.