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 {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.
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}
- Setelah itu kopikan kode berikut diantara </head> dan <body> :
<div id="gambar1">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”.
<a href="http://www.tipstrikblogging.com/" target="_blank" title="Tips Trik Blogging">
<img border="0" src="http://URL gambar anda"/></a>
</div>
- Klik Preview atau lakukan pratinjau, Jika sudah tampil gambar melayang diblog anda baru save/simpan pekerjaan anda!
Nah demikian tutorial membuat floating image atau gambar melayang diblog kali ini, mudah bukan? Selamat mencoba!
+ komentar + 1 komentar
selalu bersyukur, terimakasih informasinya berguna untuk
https://www.suaramedianews.com
Posting Komentar