Apa Float Image/gambar melayang? hehehehehehe... susah mau kasih definisi detailnya... coba perhatikan didalam blog ini, floating image adalah gambar kotak yang terletak dibawah display page halaman ini.
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:
- Login pada akun BlogID anda.
- Kemudian pilih Dashboard klik Tata Letak dan pilih Edit HTML.
- Cari kode ]]></b:skin> dengan menekan Control + F setelah ketemu letakkan code dibawah ini di diatas ]]></b:skin>.
#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
- Kemudian Copy kan lagi kode dibawah ini diantara ... </head> dan <body> :
<div id="gambar1">
<a href="http://bloggerblogku.blogspot.com/2010/05/membuat-floating-image-melayang.html" target="_blank" title="Tips Membuat Floating Image">
<img border="0" src="http://s3.tinypic.com/32zovnl.jpg"/></a>
</div>
<a href="http://bloggerblogku.blogspot.com/2010/05/membuat-floating-image-melayang.html" target="_blank" title="Tips Membuat Floating Image">
<img border="0" src="http://s3.tinypic.com/32zovnl.jpg"/></a>
</div>
- Jangan Lupa lakukan Preview dulu, setelah berhasil baru Simpan.
KETERANGAN:
Untuk Merubah Letak Gambar/Image
- TOP untuk ATAS BOTTOM untuk BAWAH LEFT untuk diKIRI RIGHT untuk diKANAN Warna biru adalah URL dari gambar/image atau tautan yang ingin anda tampilkan.
- Untuk Menampilkan Floting Image lebih dari 1 adalah dengan 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.
Alamat Gambar yang dapat kamu coba : Adiwidget
Dibawah ini gambar yang dapat dicoba (Klik untuk Melihat Previewnya)
# Kupu-kupu 1 URL: http://s3.tinypic.com/32zovnl.jpg
# Kupu-kupu 2 URL: http://s6.tinypic.com/j64bw7.jpg
# Kucing URL: http://s5.tinypic.com/67uxav.jpg
# Mickey Mouse URL: http://s3.tinypic.com/ou5ahd.jpg
# Soniclari URL: http://s6.tinypic.com/auyrgh.jpg
# The Pooh URL: http://s5.tinypic.com/2itlohw.jpg
# Bumi Kita URL: http://s6.tinypic.com/9h5t8p.jpg
# Save Our Planet 1 URL: http://s6.tinypic.com/23sbwv7.jpg
# Save Our Planet 2 URL: http://s6.tinypic.com/1zf4yv8.jpg
2 komentar:
fila
air max 97
michael kors handbags
kyrie 4 shoes
nhl jerseys
longchamp handbags
jordan 4
golden gooses
nike air max 270
nike air max 97
e9v90w8b11 v8c53k6e78 o4g45z4g52 n3f16f3s64 f8l30u6z73 d2l53s0s16
Posting Komentar