Rabu, 09 November 2011

Membuat Banner melayang (floating banner) menggunakan jQuery dan CSS


Melayang maksudnya bahwa banner akan tetap tampil secara animasi walaupun halaman blog digulung ke bawah. Referensi membuat ini saya dapatkan dari Jeff Dion yang ditulis di blognya “Creating a Floating HTML Menu Using jQuery and CSS“, tapi bagaimana jika yang dibuat melayang adalah banner, bukan Menu HTML? kemudian bagaimana agar bannernya hilang ketika tombol close atau tutup di klik?
Tambahkan kode berikut di widgets sidebar atau di atas </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style type="text/css">
#FloatAlamindawa {
position:absolute;
top:10px;
left:10%;
width:470px;
}
</style>
<script language="javascript" src="http://alamindawa.com/code/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#FloatAlamindawa";
var menuYloc = null;
 
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>
<div id="FloatAlamindawa">
<center>Pasang text, banner dll di sini</center>
<div style="position: absolute; left:90%; top: 11px; width: 7px; height: 4px;"><span onmouseup="document.getElementById('FloatAlamindawa').style.display='none'"><img src="http://alamindawa.com/tutup.jpg" alt="FECHAR" width="9" height="9"/></span></div>
</div>
Keterangan:
Line 3: Banner akan berada diatas elemen lain pada halaman
Line 4: Jarak banner dengan batas atas jendela browser
Line 5: Jarak banner dengan batas kiri jendela browser
Line 6: Lebar area banner. Angkanya bisa diganti, sesuaikan dengan lebar banner yang akan digunakan nantinya.
Line 18: Perhatikan pada duration:500, ini adalah durasi pergerakan animasi banner, semakin tinggi nilainya semakin lambat pergerakannya.
Line 23: Disini tempat pasang kode script adsense, banner, text dll.
Line 24: Kode untuk tombol close/tutup banner.
Sejauh ini saya belum mencobanya di blogspot/blogger, jika anda berhasil memasangnya, silahkan berkomentar. :D

Tidak ada komentar:

Posting Komentar