Membuat floating widget

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

<style type="text/css">
.gb_fixed{
position:fixed;
top:80px;
right:0px;
z-index:+10;
}

* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid gray;
background:#111;
padding:10px;
padding-top:0px;
}
</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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKxMqjhl1P7GLgsrgId4TCLpqi5Ul6pw_-jUItx4sTZexo5K6cH6rpDl160VNBS6WNdDF6LfVvqlYRrJymXPGyxMXfGdeDiyxPpFpNYajett4DR9lV08nVzZutry1pOZ4-Uq4u_ep9DbpJ/s320/CloseButtonHot.bmp" /></a> </div>

tempatkan apa saja disini

<p>
<span style="font-size: 80%;">
<a href="http://jendelainfo23.blogspot.com/p/daftar-isi.html">Jendela Informasi</a></span></p>
</td></tr></table>
</div>

<script src="http://andreblog.googlecode.com/files/ordinaryhack-floatingku.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnV3CqrJq8c0l4Q07ETBBsrvDbaTuZPnSxM0DZRXC843TxxfKK2By19vAKYwODHu3tTmaEPEFPbz-1jil5Q12cNqPNYJa7Wv6-5gfAG-E9jZhpEkXTtKnaT2ZhMEOMW0OG2rlmPMPg-RwP/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>

Silahkan di Coba

Related Posts : CSS, html, Membuat Floating