How to Create a Guest Book Floating (Floating Guest Book)

I have encountered more frequently when the streets (blogwalking) find a widget that adds curiosity piqued enough. Yes, That's guestbook floated on the right side up / down. The question arises, How do I make it? .... Ah basic newbie new day about it, but long ago is no stranger to the bloggers who are more senior than me. Rather than continue to vent, I better write down how to make it. the thing to remember also increased the widget on our blog it will gain weight when loading, Yes to save space in addition to its advantages, but there are also negative effects (it was used):

Please copy the code below ..
1. Entered on the Layout menu / Edit Layout
2. Click Add a Gadget / Add a Gadget
3. Choose HTML / Javascript
4. Copy and paste the following code in the HTML / Javascript is
<style type="text/css">
# gb {
position: fixed;
top: 50px;
z-index: +1000;
}
* Html # gb {position: relative;}

. gbtab {
height: 100px;
width: 30px;
float: left;
cursor: pointer;
background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zuSwK31fBD_5AfCthREZYTekyLZAfhyTMs7yEbcJp_7otKgtlFQ24lpdSNEvLLLdRkBgIYOEjmJ0u5LjxAjpLUd7JaCwIWmWMlKr_QyPk9PzaHGiH4BV6nqv6i438CIu1iBndF-1xYWN/') no-repeat;
}
. gbcontent {
float: left;
border: 2px solid # A5BD51;
background: # F5F5F5;
padding: 10px;
}
</ style>

<script type="text/javascript">
showHideGB function () {
var gb = document.getElementById ("gb");
var w = gb.offsetWidth;
gb.opened? moveGB (0, 30-w): moveGB (20-w, 0);
gb.opened =! gb.opened;
}
moveGB function (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 width="160" height="400" frameborder="0" title="m4n0" src="http://www6.shoutmix.com/?m4n0" scrolling="auto">
<a href="http://www6.shoutmix.com/?m4n0"> View shoutbox </ a>
</ Iframe>
<br /> <a href="http://www.shoutmix.com" title="Get your own free shoutbox ShoutMix chat widget at ShoutMix!"> chat widget </ a> <br />
<! - End ShoutMix ->
<br/>
Guest Book for your interest in this? <br/>
Click on
<a href="http://YOUR BLOG ">
here </ a>

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

</ div>

</ div>

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

Note:

1. Do not unite with the ads that float because it would be chaotic.
2. Be marked with red letters that can be replaced, for example, your guestbook or shoutbox cbox.

5. Click Save.

-->