Pada kesempatan kali ini saya hanya ingin berbagi tutorial sederhana cara menambahkan floating image atau gambar melayang diblog. Disebut demikian bukan karena gambarnya bisa melayang kesana kemari, tapi gambar tersebut tetap diam (statis) sekalipun anda menarik scroll atau menggulung layar.
Adapun manfaat dari kita memasang floating image mungkin selain membuat blog kita lebih menarik, juga kita bisa menyisipkan tautan link pada gambar tersebut sehingga ketika gambar diklik akan langsung ke alamat yang dituju. Beberapa blog kadang menggunakan image welcome to my blog atau space iklan.
Nah sekarang bagaimana cara membuat floating image ini? Caranya cukup mudah. Anda bisa mengikuti langkah-langkah berikut:
- Setelah sign ini ke akun anda, dari dashboard klik Tata Letak dan pilih edit HTML.
- Cari kode berikut dengan menggunakan Control F ]]></b:skin>
- Jika sudah ketemu, copykan kode berikut diatas kode ]]></b:skin>:
#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
Note: Perhatikan tulisan berwarna biru diatas adalah posisi gambar anda nantinya. Jika anda ingin mengubah letak gambar, ubah saja posisinya (top dan right) diatas dengan bottom untuk gambar dibawah dan left untuk gambar diposisi kiri blog.
- Setelah itu kopikan kode berikut diantara </head> dan <body> :
<div id="gambar1">
<a href="http://www.tipstrikblogging.com/" target="_blank" title="Tips Trik Blogging">
<img border="0" src="http://URL gambar anda"/></a>
</div>
Note: Perhatikan tulisan berwarna biru diatas, jika ingin mengganti link (tautan) kamu tinggal mengubah pada href=”alamat tautan” yang kamu inginkan. Demikian juga jika ingin mengubah gambar src=”Alamat/URL gambar anda”.
- Klik Preview atau lakukan pratinjau, Jika sudah tampil gambar melayang diblog anda baru save/simpan pekerjaan anda!
Lalu bagaimana jika ingin membuat floating imagenya lebih dari satu? Anda tinggal mengcopy kode #gambar1 dst., Lalu ganti menjadi gambar2. Copykan pula <div id='gambar1'> dst., lalu ganti menjadi gambar2 dst.
Nah demikian tutorial membuat floating image atau gambar melayang diblog kali ini, mudah bukan? Selamat mencoba!
0 Komentar untuk "Membuat Floating Image Atau Gambar Melayang Di Blog"