Membuat Floating Widget ChatBox [Sepertinya Punya Saya]

Assalamualaikum wr wb,
Selamat malam dan salam blogger yang kami ucapkan, sepertinya untuk update kedepannya saya akan memfokuskan untuk membahas Tips Trick Blogger, dan ini salah satunya. Sebelumnnya saya sudah pernah meng-update Cara Membuat Chat / Kotak Chatting Shoutmix dan Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog anda ! .

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.m-azka.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.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></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/AVvXsEhC-iR1xbHJuCl-UjNbVLtydZ7vf90392NBYhazXSDavjLcBCG0tF8atkR4YBt2VAp7pF0y_0HUNWG8ugNSbC5lc4bSCem2Rf6JnqRgCXXoMJryUJ5bX0EjC5ZX3gK1oBTcqcYn-e41TOWz/s1600/cbred.png" style="filter: alpha(opacity=60); opacity: 0.6;" />
</a> </div>
<!-- desaign chatbox by http://www.m-azka.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/AVvXsEj-owmL5BElhxK_gDrdLNptrb60Gowm0Logc8CrgXEreztQ3gU9TVCD7sNSPab5afSBICDGFW1RYmHYbSjDsGeX26WmCsxMj1A2gwuvJ574lxGgNZ91u9prlvkmJodqOwV752-44_0zD0iT/s1600/cbblue-2.png
Warna border #0079a0


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD9JRAxYoYfs5PviAFXSr9dPv_8_c289DI6TAervAKE_MHIJld0MK05DjPUymugSxlVJye-4AUP082FSTGtawkDlioiQTEmrsnxDFH0lr6A-kXXH1e3XqH1T_QGnt8Wf13eAF4pMg8XI7V/s1600/cbblue.png
Warna border #003e82


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsSi_m6TCWmK4ZvukxGi3ZhGyqXjBSJvkoW-INpRDANTJLfbLMxFCr-bDSOF4trQpmtFM8NoPfwWEOXCxpfw9JC4a9d1GxRV27sJyKG6iMUZlQRV_-5I9aTIrVs3nIV6Him8KVsPO4TPYJ/s1600/cbgreen.png
Warna border #008232






URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD2MkIBehVnBoq4OG2l7OwrMbKwQQ1ZMCZC6QrZoz0DfMqPsA85KWzMW7F5tPWOLK0PbdDrUJl3yo-sSJYmAgq6RfwIEuhFiwXo2wTH8G7R0RgvXk9XOymvULuIEk-Qzs3Q68B4iwQ1RrT/s1600/cbyellow.png
Warna border #aca500


URL Gambarhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC-iR1xbHJuCl-UjNbVLtydZ7vf90392NBYhazXSDavjLcBCG0tF8atkR4YBt2VAp7pF0y_0HUNWG8ugNSbC5lc4bSCem2Rf6JnqRgCXXoMJryUJ5bX0EjC5ZX3gK1oBTcqcYn-e41TOWz/s1600/cbred.png
Warna border #790909

IMPORTANT !!

Kepada copas'ers hargai yang mendesaign widget ini "m-azka" tolong jangan hapus sumber pada javascript yang sudah ada, Apalagi diganti linknya menjadi blog anda.. Saya akan tau siapa saja yang copas ini javascript karena saya punya account yang bisa melihat siapa aja yang copas ini artikel dan Javascript-nya. Jika ketahuan saya akan lapor pada google tentang hak cipta dan blog anda + artikel" anda tidak akan pernah ada digoogle.