17/03/2012 Cara Memasang Float ChatBox Di Blog

Cara Memasang Float ChatBox Di Blog - Mungkin tutorial ini sudah banyak dibahas di blog lain. Namun, tutorial kali ini memang sedikit berbeda dengan tutorial memasang float chatbox pada umumnya. Kalau biasanya, float chatbox nya menampilkan efek slide (kiri - kanan) kali ini sedikit berbeda. Efek yang ditampilkan autohide alias muncul dengan efek tersembunyi. Untuk demo mungkin gag ada, karena keterbatasan ruang. Jadi, silahkan dicoba deh, dijamin gag bakalan nyeseeeel.....

1. Login ke blogger.com
2. Pilih Rancangan --> Design --> Tambah Gadget --> HTML/ Javascript
3. Salin kode berikut ini didalamnya :

<style type="text/css">
.gb_fixed{position:fixed;
top:60px;
right:-4px;
z-index:+10;
-moz-border-radius:3px;
border-radius:3px
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;
border:1.5px solid #cccccc;
-border-radius:5px;
background:#000000;
padding:10px;
padding-top:0px;
-moz-border-radius:5px;
border-radius:5px;
}
</style>

<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="http://lh4.ggpht.com/_oFXd4wU3lK8/TSQrWfZqfnI/AAAAAAAAADQ/OzM7TygiCdM/Close.png" title="Click to Close"/></a></div>


LETAKAN KODE HTML CHATBOX ANDA

<div>
<center><blink><a href=http://4-jie.blogspot.com/2011/08/cara-memasang-float-chatbox-di-blog.html' target='_blank'>Get This Widget</a></blink>
</center></div>
<center>
</center></td></tr>
</table>
</div>
<script src="http://yourjavascript.com/21261405011/cbox-bitexp.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img style="border:0; cursor:pointer" src="http://lh4.ggpht.com/_oFXd4wU3lK8/TTe7ZFV0vII/AAAAAAAAAD4/ZFesT6A_s2c/Chatbox.png" alt="Widget By:4-JIE" />
</a></div>

4. Save