Pada kesempatan kali ini kita akan belajar bagaimana
membuat float image (gambar melayang) pada blog. Sobat bisa lihat pada pojok
kiri atas dan bawah dari blog ini, ada 2 buah gambar yang terus berada pojok
browser yang selalu mengikuti kursor dari mouse. Itulah yang dimaksud
dengan float image. Cukup mempercantik tampilan blog kita kan?
Kelebihan dari float image ini adalah selain memperindah blog juga dapat kita sisipi link. Sehingga jika ada yang mengklik link tersebut maka akan langsung menuju ke tautan yang telah ditentukan.
Tertarik untuk mencobanya?
Langsung saja langkah-langkah pembuatannya adalah sebagai berikut:
1. Login blogger dan langsung menuju ke Design > Edit HTML.
2. Cari kode berikut (bisa menamnfaatkan Ctrl+F)
Kelebihan dari float image ini adalah selain memperindah blog juga dapat kita sisipi link. Sehingga jika ada yang mengklik link tersebut maka akan langsung menuju ke tautan yang telah ditentukan.
Tertarik untuk mencobanya?
Langsung saja langkah-langkah pembuatannya adalah sebagai berikut:
1. Login blogger dan langsung menuju ke Design > Edit HTML.
2. Cari kode berikut (bisa menamnfaatkan Ctrl+F)
]]></b:skin>
3. Taruh kode berikut diatas kode ]]></b:skin>
#trik_pojok {
position:fixed;_position:absolute;bottom:5px; left:15px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
position:fixed;_position:absolute;bottom:5px; left:15px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
NB: Kita bebas mengatur letak float image yang akan tampil pada blog kita.
Caranya adalah dengan mengganti kata yang dicetak tebal pada kode diatas. Kode
diatas adalah untuk meletakkan float image pada pojok kiri bawah. Jika sobat
menginginkan letaknya pada pojok kanan atas, maka kata yang dicetak tebal
tinggal diganti dengan top dan right.
Kita juga bebas untuk mengatur koordinat dari float image yang akan kita
tampilkan. Caranya adalah dengan mengganti kode angka yang dicetak miring pada
kode diatas. Misalkan kode diatas adalah bottom:5px; left:15px; maka float
image yang muncul akan berada 5 pixel dari bawah dan 15 pixel dari sisi kiri.
Sobat tinggal mengatur hal tsb sesuka sobat.
4. Kemudian letakkan kode dibawah ini diatas kode </body>
<div id="trik_pojok">
<a href="http://www.dzickies.blogspot.com/">
<img src="http://i54.tinypic.com/svrhip.png" border="0" /></a>
</div>
<a href="http://www.dzickies.blogspot.com/">
<img src="http://i54.tinypic.com/svrhip.png" border="0" /></a>
</div>
NB: Kata yang dicetak
tebal adalah link yang akan berfungsi pada float image. Sobat bisa mengganti
link tersebut sesuai keinginan sobat. Selanjutnya kata dicetak miring adalah
sumber gambar dari float image. Sobat bisa menggantinya dengan logo sobat
sendiri, tapi terlebih dahulu harus diupload di situs photo sharing
misalnya http://tinypic.com/
5. Terakhir simpan perubahan pada template sobat dan lihat hasilnya.
0 comments:
Post a Comment
jangan lupa di komen ya ..