Kalau kamu membuka-buka blog ini pasti kamu akan bertanya-tanya kenapa gambar panah ke atas dan ke bawah tetap diam sekalipun kamu menggulung layar (menarik scroll)? Nah, itulah yang dimaksud dengan gambar melayang (float image). Jadi maksud gambar melayang disini bukannya gambar yang bisa melayang kesana kemari seperti Gatotkaca, tapi gambar yang tetap diam (statis) sekalipun scroll ditarik.
Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.
Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
<a href="http://ruangsc.blogspot.com/" target="_blank" title="Tips Membuat dan Mendesain Blog">
<img border="0" src="http://s3.tinypic.com/32zovnl.jpg"/></a>
</div>
Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget). Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="alamat tautan" dengan alamat tautan yang kamu inginkan (Mengenai link lihat Membuka Link Di Halaman Tab Baru).
Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.
Nah, mudah kan? Selamat mencoba...
sumber
Selasa, 14 Desember 2010
Membuat Gambar Melayang (Float Image) Pada Blogspot
04.52
azta vacasta
]]></b:skin>
#gambar1 {
<div id="gambar1">
Berikut adalah beberapa gambar yang bisa kamu pilih (klik untuk melihat gambarnya!)
Azta News
Diberdayakan oleh Blogger.
0 komentar:
Posting Komentar