Cara Pasang Widget Floating ChatBox (Buku Tamu)

Baiklah pada kesempatan kali ini, utta ingin memberikan trik cara membuat Floating Widget ChatBox(Buku Tamu).yang sudah saya otak-atik kode CSSnya, dimana Widget ini sangat berdeda dari Widget Buku Tamu dari biasanya, karena saya sudah memberikan beberapa efek, diantaranya efek : 'Rotate Miring','Boder Garis Lengkung', dan 'Efek Hover Box'.

sebenarnya saya agak terburu-buru, membuat posting ini, karena ada slh satu teman blogger yg request tuk dibuatin Template ala cewe',secara template sayakan Uniqx Transparent Semuanya, jd kurang bagus, klw cewe' yg make'.hehe,..


Okelah klw bgtu langsung saja, sobat bisa langsung memcobanya diblog sobat.

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan/Tata Letak
3. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
4. Masukan Script Berikut Di dalamnya

<style type="text/css">
.gb_fixed{position:fixed; top:60px; right:0px; z-index:+10}

* html .gb_fixed {position:relative;}
#hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
#hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://www.bookonthenet.net/east/RKEres/Images/CloseButtonHot.bmp" /></a>
<span style="font-size: 80%;">
Mau Widget
<a href="http://www.uttafreak-987.co.cc/2011/05/cara-pasang-widget-floating-chatbox.html" target="_blank">
Seperti Ini
</a>
and
<a href="http://www.uttafreak-987.co.cc/2011/04/cara-memasang-chatbox-buku-tamu-pada.html" target="_blank">
Buat Buku Tamu!
</a></span></div>

--> Kode Cbox(Buku Tmu)  Anda Disini <--

</td></tr>
</tbody></table>
</div>

<script src="http://marewainfo.googlecode.com/files/ordinaryhack-floating.js">
</script>
<div class="gb_fixed" style="z-index: +5;">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="http://i1181.photobucket.com/albums/x427/mazkac/chatbox.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>

5. Save.

Note ::
- Yang berwarna hijau adalah URL background kembang api dan kode warna backgroundnya (*Background dapat diganti sesuai selera sobat)
- Tang berwarna merah ganti dengan kode Cbox.

Jgn Lupa Lihat Juga Widget Buku Tamu Lainnya :

1. 'Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka'
2. ' Buku Tamu Bergaya Absolute Vertical Sliding Panel'
3. 'Cara Membuat Buku Tamu Blog Show/Hide di Bagian Atas'

Cukup sekian tutorialnya,, maaf atas segala kesalahan dan kekurangan. Saya harapkan sarannya untuk memperbaikin kesalahan dan kekurangan penulisan ini.