Membuat Objek Melayang

Jika anda sering melakukan blogwalking maka anda akan melihat ada beberapa blog yang memasang objek melayang. Objek melayang adalah objek yang selalu berada dilayar meskipun scrollbar digulung keatas ataupun kebawah. Sehingga objeknya selalu tampak oleh pengunjung. Objek ini bisa berupa teks, gambar, link, iklan, widget, flash, dll.

Nah berikut saya akan memberikan tutorial membuat objek melayang dengan fungsi redup atau opacity. Bagi anda yang pernah menggunakan photoshop pasti sudah tahu apa itu opacity. Sebagai gambaran silahkan lihat disini lalu arahkan mouse anda ke musik player yang berada di pojok. Maka musik playernya akan menjadi visible.

Ok sudah jelas ya? Nah bagi anda yang ingin mencobanya. Berikut caranya:

1. Login ke Blogger. Lalu klik Design -> Edit HTML

2. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#float {
opacity: 0.6;
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

#float:hover {
opacity: 1.0 }

Keterangan:
0.6 merupakan tingkat keredupannya. Semakin rendah nilainya semakin redup objeknya. (nilainya mulai dari 0.1 - 1)

Tulisan yang dicetak tebal merupakan posisi objek. Jika anda ingin meletakkan diatas maka gantilah bottom dengan top. Jika anda ingin meletakkan objeknya disebelah kanan maka gantilah left dengan right.

Jika anda ingin meletakkan objek ditengah maka aturlah nilai bottom atau left-nya. Semakin tinggi nilainya semakin ketengah objeknya.


3. Setelah itu, letakkan kode berikut diatas </body>

<div id='float'>letakkan konten anda disini</div>

Silahkan ganti tulisan yang berwarna merah dengan teks, link, gambar, iklan, atau widget anda.

4. Jika sudah simpan template anda dan lihat hasilnya.