Membuat Buku Tamu Melayang Disamping Blog

Tutorial ini saya buat berdasarkan pengalaman saya yang juga memakai widget chat box. Tapi widget ini sudah mengalami banyak perubahan karena telah saya edit. Berikut tutorialnya :

Langkah :

1. Login di Blogger

2. Pilih "Rancangan" >>> lalu pilih "Elemen Laman"

3. Tambahkan gadget, pilih HTML/Java Script

4. Copy dan paste kode dibawah ini.

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
background: url(http://i1107.photobucket.com/albums/h396/3skuncisukses/BGwhite.jpg)repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #000000;
-moz-box-shadow: 2px 2px 4px #000000;
}
</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=" background:-moz-linear-gradient(top, #000000, #999, #000000); color:#ffffff;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #000000;
-moz-box-shadow: 2px 2px 4px #ffffff;"> CLOSE CHAT BOX</b></a></div>
<br/>
MASUKKAN KODE CHAT BOX ATAU SHOUTMIX KAMU DISINI
<br/>
<div><a href="http://ifsite.blogspot.com/2011/05/membuat-buku-tamu-melayang-disamping.html"><b style=" background:-moz-linear-gradient(top, #000000, #999, #000000); color:#ffffff;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-box-shadow: 2px 2px 4px #000000;
-moz-box-shadow: 2px 2px 4px #ffffff;"> Mau ChatBox Seperti Ini?</b></a></div>

</td></tr></table>
</div>
<script src="http://kangdadang.googlecode.com/files/shouteffect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="http://i1107.photobucket.com/albums/h396/3skuncisukses/bukutamu.jpg" />

</a>

</div>

5. SIMPAN