Cara Membuat Floating Widget ChatBox

Dalam kesempatan kali ini saya akan membahas Membuat Floating Widget ChatBox sepertinya yang punya saya, bisa anda lihat di sidebar atau bisa lihat screenshot dibawah!

Floating Widget ini sudah sedikit dimodifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga misalkan : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.


Caranya:
Copykan Script dibawah ke : Buka Layout - Page Element dan Klik add gadget - Lalu pilih HTML/JavaScript.

<!-- desaign chatbox by http://www.habibnoerq.com/ START -->
<style type="text/css">

.gb_fixed{
position:fixed;
top:60px; 
right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:0px solid gray;
background:transparent;
padding:10px;
padding-top:0px;
}
</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>
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<span style="font-size: 80%;">
<span style="color: red;"> Get this</span>
<a href="http://www.habibnoerq.com/2012/07/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>

Masukan Script yang kamu inginkan disini! Misal: kode Shoutmix, Adsense, Sponsor. 

</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8txN3XT5J7wWJNO0meBka5wXGofw3OXUm6yCfqUvqnV2E1GAvTVqWnKjx6R4gXTZAG9KahhLUfuCdT8tO_b431HOikfuWWYtJlt0zIfHZfV9g5iWRgaZAfNkZUsjy0vkRahGmTXtehU19/s1600/cbred.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>
<!-- desaign chatbox by http://www.habibnoerq.com/ END -->

Tambahan tombol saat membuka chatbox:
Berikut ini adalah icon hidden chatbox dan warna border yang serasi dan bisa anda gunakan dalam hidden chatbox anda ,


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKn4_kYXqCZrXIVgbRntPzR0yabh53GQnI0VjNQvv52KGFNBVL5yzLNp2stC_mH_YhtC3GBRi8CxQwlt7nyPnQf9_oCtH4BZgbf-V3xQNvn4RcIKkPys3Z0aVSSaup1FF0__lZq2I0c7sY/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qAuiYHrjqkbsCO9UVb8MZGfNACYg_HHvOlp8wbn0rqEmGrwdV41bNXPpXsddVBEXtpsHHmzGyYXuRc1DCbfJh8ykbkaX91bC0u2sTSbnh07uiWA28ww1qiuTN1OSNEb9tvwuuiJcGbGg/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQAAzzE9C8QCuMIcOzsKJl8wggHIuVzvi2J2QnsA1h7VfLZpDypUy_YbMfvRUJyZjhHDxXQiceQHOriX-ZsG4D6TcD7UayrlIBnbFEhFTnSh7cugHqQBW2fnwXdJCONUjMqAwXrshfTaJh/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDZwY_8Gu38TJgfvNT5qEK67U-bCSAzbh2brKsYBG2u0Jp5niDOr5NpmqnjmQ1onY9o9N3JOS8R6NwFlY-e5uXndcQ3MbeJ-f5FtT_AdQi3zD2IS0_P7y0Bae4fEosPhjwd29oIZAZKVX/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8txN3XT5J7wWJNO0meBka5wXGofw3OXUm6yCfqUvqnV2E1GAvTVqWnKjx6R4gXTZAG9KahhLUfuCdT8tO_b431HOikfuWWYtJlt0zIfHZfV9g5iWRgaZAfNkZUsjy0vkRahGmTXtehU19/s1600/cbred.png
Warna border #790909