HomeHalo Sobat...setelah belajar iklan melayang sekarang kita belajar membuat gambar melayang, seperti di blogku ini di pojok kanan atas, Dengan gambar/pernik-pernik melayang menjadikan blog lebih bervariasi, Gambarnyapun dapat kita beri link tautan ke halaman lain, weleh keren bangets...!. Langsung aja bagaimana caranya ya...?.
Langkah-langkah membuat float image :
- Login ke Akun Blogger Sobat
- Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
- Cari kode berikut dengan menekan Control F agar lebih capat :
- ]]></b:skin>
- Jika sudah ketemu, kopikan kode berikut :#gambar1 {position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
- Letakkan kode tersebut di atas ]]></b:skin>
- Setelah itu kopikan kode berikut :<div id="gambar1"><a href="Alamat Tujuan" target="_blank" title="Gambar Melayang">
<img border="0" src="alamat gambar"/></a>
</div> - Letakkan kode tersebut di antara </head> dan <body>
- Lakukan Pratinjau (Preview). Jika sudah OK baru simpan.
Jika Sobat 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 ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan . Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="Alamat Tujuan" dengan alamat tujuan yang Sobat inginkan.
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.
Berikut beberapa alamat gambar yang dapat Sobat jadikan pilihan:
- Kupu-kupu 1 URL: http://s3.tinypic.com/32zovnl.jpg
- Mickey Mouse URL: http://s3.tinypic.com/ou5ahd.jpg
- Bumi Kita URL: http://s6.tinypic.com/9h5t8p.jpg
- Soniclari URL: http://s6.tinypic.com/auyrgh.jpg
- Save Our Planet 1 URL: http://s6.tinypic.com/23sbwv7.jpg
- The Pooh URL: http://s5.tinypic.com/2itlohw.jpg
- Kupu-kupu 2 URL: http://s6.tinypic.com/j64bw7.jpg
- Kucing URL: http://s5.tinypic.com/67uxav.jpg, dan masih banyak lainnya
Tidak ada komentar:
Posting Komentar