Kamis, 28 April 2011

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.

23 comments:

  1. Silahkan bro, semoga berhasil ya :)

    BalasHapus
  2. bagai mana cara menganti gambar iconnya chat box... tolong balas di email saya junie.art@gmail.com terimaksih.

    saya sudah ganti URL image yg berwarna orange dengan URL icon saya tapi tetap gak berubah.....

    BalasHapus
  3. Masa sih sob? gua coba lagi pake blog laen bisa kok :)

    BalasHapus
  4. wah... keren floating chatboxnya mas
    tengkyu...

    BalasHapus
  5. mas Bro , blog ane boleh mejeng di Blog And Roll ga ?

    BalasHapus
  6. boleh gan :) tapi di blog agan apa ya?? ane liat dulu :)

    BalasHapus
  7. Izin coba gan :D
    tapi kalo gini nambah berat blog gk ya ?

    BalasHapus
  8. dijamin ngga berat bro.. :beer:

    BalasHapus
  9. gan kalau ingin diletakkan disisi kiri gimana cara nya

    BalasHapus
  10. gan... ane dulu pake shoutmix... uda sekitar 2 taon lebih ehh... tiba2 kadaluarsaaa T__T ane sedih gara2 disono ada banyak komen dr tmn2 blogger yang belum sempet ane kunjungin balik. Ada nggak ya cara buat ngeliat komen di shoutmix yang uda kadaluarsa???

    BalasHapus
  11. ijin copas gan...

    BalasHapus
  12. ikut compas yach.,.,.,
    VVVIIISSSS

    please.,., :)

    BalasHapus
  13. waah keren gan..
    minjem untuk di pasang di blog saya ya gan..

    BalasHapus
  14. mau ane pasang di web ane sob, keren nih..
    thanks ya..

    BalasHapus
  15. Tampilan floating chatbox memang menarik, tapi kadang di monitor saya kolom nama tidak terlihat...

    BalasHapus
  16. om azka.mo dicoba dulu ya..

    BalasHapus
  17. Izin copas ya.. Makasih sebelumnya atas perkongsiannya.. Sehari2 nyari baru kali ini berhasil..

    BalasHapus

Blog ini menganut sistem DOFOLLOW, dan Memakai moderasi komentar untuk mengantisipasi terjadinya "Spammer". Maka dari itu cobalah comment yang baik dan bermanfaat bagi blog ini dan Dapatkan backlink gratis dari blog ini..