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/AVvXsEjngSXf7t64uUiZ7e9SfT1mgoBwt5yOyl2hKktNy04FNI_F4p0B9hfq0uQzuanLyTcoxkaqP8Oe_9cj6gaHdv_wxCluz1zLjz3bgaG__CmEW1WNckYbnF870cYyMLmGJvNGRRzRPVEwV0pa/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/AVvXsEjYNnav4ByVVEaR_cLiabINLJx9RwgyWVRWk8mftRCq5uXkIjHIFN8g-c_slRVXZFUJ6j7foTx__g6M2kPacKgzI2IYow5PwHQh1m1q9cXuCToznV6AR5yomgFLU5g4Wq1887pQzstWAqEF/s320/sponsored.png" style="filter: alpha(opacity=60);
opacity: 0.6;"
/>
</a>
</div>
Tulisan warna BIRU adalah gambar/image yang dapat diganti sesuai keinginan.
|
