Membuat Floating Widget /Widget Melayang

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/AVvXsEhWKg1LW-9J8tPghT0cXE6UpZkX1EVFQioakO6Jxwur9eJ0mzlfJgbXki2fv6IXGsjtabny0eo4vyHi6Xh_-pKTn1MxaiI_GY8dQMxHjDbL-v-xaOrs3MN3AVkCzro58cMigmhRgicKmgFV/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/AVvXsEif9qaA8t5J1T2K9UxTdGML1k4K_AVLgA7A8rudbmUHInwAiAiQADF8OeKJFg0dujPpg8jKi9Jjx1F3BIlwJqT8LP8kNdgHGgLMq67g-s6cXHnxukTrBoy0AZLgwpa8cGvfYhhRCf3g2-VC/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>
Tulisan warna BIRU adalah gambar/image yang dapat diganti sesuai keinginan.
Daftar  Isi  Floating
Gambar Daftar Isi

0 komentar:

Posting Komentar

Kalau berkenan memberikan komentar, harap menggunakan kalimat yang santun dan tidak membahas topik lain di luar konten blog ini. Terima kasih.

Next previous home