//
you're reading...
Tutorial

[WordPress] Trik Membuat Floating Image – Gambar Melayang


Penasaran bagaimana cara membuat Floating Image atau Gambar Melayang?

Eit. Tunggu.
Apa maksudnya Floating image atau Gambar Melayang?

Floating image adalah gambar (apa saja) yang bisa kita tampilkan di browser yang tidak mengalami perubahan posisi saat kita melakukan scrolling pada window tersebut. Dengan kata lain, floating image selalu tetap berada posisinya meskipun kita sedang membaca suatu artikel yang panjang pada browser.

Bingung?

Contoh sederhana ada pada blog saya ini.
Perhatikan logo Facebook dan Twitter di sebelah kiri layar. Gambar tersebut akan selalu tetap pada tempatnya meski anda telah melakukan scrolling. Menariknya, anda bisa menyisipkan hyperlink pada gambar tersebut. Jadi ketika anda meng-klik floating image tersebut, anda akan membuka alamat facebook saya.

Menarik? baik, kita mulai.

Pertama, tentukan dulu gambar yang ingin anda pakai. Jika anda berniat “menempelkan”nya tepat bersinggungan dengan jendela/window, buatlah berbentuk lurus. sebagai contoh, Gambar saya berupa garis lurus pada sebelah kiri karena memang saya berniat menempelkannya di sebelah kiri. Jika ingin menempelkan di sebelah atas, buatlah gambar memanjang secara horizontal. Namun, jika anda tidak berniat menempelkannya bersinggungan dengan window, alias mengambang di tengah jendela, gambar bisa berbentuk apa saja. Doraemon boleh, Mickey Mouse juga OK🙂

Berikutnya, upload gambar anda melalui wordpress, atau hosting pic. Saya sendiri lebih suka wordpress pribadi karena terjamin tidak akan terhapus. Pilih Media > Add New Lalu upload gambar seperti biasa. Jangan lupa catat hasil gambar tersebut ter-upload. Contohnya :

https://sauki.files.wordpress.com/2012/05/fb.png

Atau bila masih kesulitan, gunakan saja gambar saya. Catat alamat di atas.

Berikutnya, pilih Appereance > Widgets. Tambahkan widget baru (terserah di mana saja) berupa Text Widget.  Saran saya, letakkan text widget di paling bawah agar tidak terlalu mencolok. Isi widget dengan kode berikut:

<div style=”display:scroll;position:fixed;top:320px; left:0;”><a href=”http://www.facebook.com/sauki“>
<img src=”https://sauki.files.wordpress.com/2012/05/fb.png” />
</a></div>

Perhatikan tulisan yang saya beri warna.

Merah. Menunjukkan posisi. Ganti sesuai selera. top:320px; left:0; artinya jarak dari atas 320 pixel dan dari kiri 0 pixel. bottom dan right tidak perlu saya tulis. Jika anda ingin mengambang di kanan, ganti left:0; dengan right:0;

Hijau. Ganti dengan hyperlink yang dituju.

Ungu. Ganti dengan alamat gambar. Anda bisa menggunakan alamat gambar saya sebagai percobaan.

Semoga berhasil. Jika ada pertanyaan, jangan sungkan.

ARTIKEL MENARIK LAINNYA:

Discussion

No comments yet.

Leave a Comment!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: