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.
