Membuat Widget Chatbox/Chatting Melayang

Tengoklah sisi kanan pada blog ini, ada gambar dan tulisan Obrolan Seru.
Apabila gambar tersebut di click maka akan muncul widget chatbox, keren gak?

Gimana caranya?

1. Log in ke www.blogger.com

2. Klik Tata Letak

3. klik Tambah Gadget
4. Klik HTML/Java Script
5. Copypaste script berikut

<style type="text/css">

.gb_fixed{
position:fixed;
top:45px;
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>
</div>


<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="250" height="425" src="http://www6.cbox.ws/box/?boxid=686979&amp;boxtag=ey8frl&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-686979" style="border:#ababab 1px solid;" id="cboxmain6-686979"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www6.cbox.ws/box/?boxid=686979&amp;boxtag=ey8frl&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-686979" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-686979"></iframe></div>
</div>
<!-- END CBOX -->
</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/AVvXsEhCEhraUijViYfb5uSRw17sQNBAhUQyB_9cwu8pqpuq0nLWhhamZ5HkPDV_-dFKNlrcPYQaFsBqIyGNg_vFJYcAr3i8hFomlPoU72xF6Uv0JYs0vWb7E2pol-XVB_ieo34V0io3qEN1_LkL/s1600/31017.png"  />
</a> </div>

<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID=3509209728913581248&widgetType=HTML&widgetId=HTML1&action=editWidget&sectionId=footer-left' onclick='return _WidgetManager._PopupConfig(document.getElementById("html1"));' target='configHTML1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>

Ganti kode yang berwarna merah dengan script yang sobat dapet dari cbox atau widget chatting lainnya,
Belum punya cbox? DAFTAR CBOX. Ganti kode yang berwarna biru dengan URL gambar sobat,

Bagaimana caranya kita mendapatkan URL gambar? Baca http://fullerena.blogspot.com/2012/04/mendapatkan-url-gambar-dari-blogger.html