Cara Pasang Floating Images di Blog WordPress

5 Oktober 2010

Cara buat gambar melayang Floating Image di Blog WordPress | Cara Pasang Animasi Flash di Blog

Sobat narablog, artikel berikut saya ambilkan dari blognya mas bro Bootingskoblog. Artikel-artikel tutorial wordpress di blog dia sangat bagus baik untuk narablog pemula maupun yg sudah bangkotan di wordpress.com 😆 Dari blog inilah saya pribadi banyak belajar bagaimana membangun blog wordpress.

Jika rekan narablog tertarik untuk mencoba memasang floating images di blog untuk sekedar mempercantik tampilan blog, atau untuk alasan2 lainnya, caranya super mudah.

Login ke akun WordPress.com sobat.
Kemudian klik [Tampilan] > [Widget].
Pilih widget “Text”. Click and drag (klik dan tarik dengan mouse) widget teks ini ke sisi kanan (sidebar)
Copy dan pastekan kode dibawah ini:

Posisi bawah-kanan:

<a style="display:scroll;position:fixed;bottom:0;right:0;">

<img src="URL gambar

" /></a>

Posisi atas-kanan:

<a style="display:scroll;position:fixed;top:0;right:0;">

<img src="URL gambar

" /></a>

Posisi bawah-kiri:

<a style="display:scroll;position:fixed;bottom:0;left:0;">

<img src="URL gambar

" /></a>

Posisi atas-kiri:

<a style="display:scroll;position:fixed;top:0;left:0;">

<img src="URL gambar

" /></a>

Dan klik tombol “Save”.

Membuat Floating Image yang berlink

dari sobat narablog Lambertus , saya mengetahui info ini. Trims berat mas bro! Inilah keuntungan dari blogwalking ke narablog lainnya agar ilmu ngeblog kita terus di-update!

Floating image yg punya link ini bisa sobat manfaatkan untuk macam-macam keperluan. Linknya bisa internal (mengarah ke dalam halaman atau postingan blog kita) ataupun eksternal (menuju ke blog atau website lain). Saya beri contoh:

Posisi bawah-kiri (dengan Link)

Keterangan:

Sobat narablog bisa mengganti huruf yang dicetak merah dengan URL gambar atau animasi. URL gambar bisa didapatkan dengan meng-klik kanan pada sebuah gambar di-internet lalu klik “copy image location” (dengan browser Mozilla Firefox)
Yang dicetak biru silahkan diisi dengan link yg akan kita tuju misalnya: https://annunaki.wordpress.com
Trick ini berjalan dengan mulus di browser Mozilla Firefox, Google Chrome dan Opera.

Membuat Floating Image yang Transparan

dari nona Edda yang cantik bin ajaib itu 😆 , saya jadi tahu jika floating image bisa dibuat menjadi transparant. Kita tinggal menambahkan kode HTML ini: style=”opacity:0.1;filter:alpha(opacity=10);” di dalam img src-nya, contoh:

Posisi Atas Kiri (dengan Link)

Penjelasan Menurut Nona Edda:

opacity nya bisa disesuaikan menurut keinginan kalian. mau transparant banget kayak di blog gue ini (liat alexa gue) , atau setengah transparant juga bisa (kayak YM status gue), mana yang enak diliat ajalah. tinggal ganti opacitynya aja, jadi 0.1 dan 10 atau 0.2 dan 20, dst. up to youuuu

Tambahan

kita bisa membuat floating images-nya itu saling berderet. Perhatikan floating images di pojok kiri bawah blog ini. Contoh: untuk kiri bawah kode HTMl-nya adalah: “display:scroll;position:fixed;bottom:0;left:0;” ini bisa ditambahin lagi gambar di sebelahnya. Di blog ini saya nambahin kode : “display:scroll;position:fixed;bottom:0;left:80px;” . Angka 80 itu adalah jarak gambar kedua dari tepi sisi kiri bawah monitor. Jika di kode html kedua ini sobat tetap mengisikan angka nol, maka gambar kedua akan menimpa gambar pertama. Jangan sampai seperti ini. Jadi sobat eksperimen saja dengan angka-angka ini sampai ketemu posisi yg pas untuk 2 gambar saling berderet. Gampangnya adalah: ketahui berapa pixel besar gambar pertama. Jika gambar pertama besarnya 100 pixel, maka sobat mungkin mau memberi angka 120 untuk kode HTML gambar kedua.
Saya beri contoh. Ini adalah kode HTML dari 2 floating images yang berderet dari pinggir bawah kiri di blog annunaki. Gunakan 1 wigdet text saja:

Kode HTML Pertama

Kode HTML Kedua

Keterangan:

Image source dari gambar pertama berasal dari whos.amung.us yang merekam jejak pengunjung di blog annunaki. gambar tsb saya beri link ke halaman ini. lebar gambarnya kira-kira 80 pixel. Image source dari gambar kedua berasal dari PRchecker info yang merekam PR dari blog ini. Gambar tsb saya berikan juga link ke halaman tutorial ini. dari lebar gambar pertama, maka saya bisa membuatnya berderet dengan menyisipkan angka 80px di kode HTML 🙂

Update:

Cara Pasang Animasi Flash sebagai Floating Images

Saya minta sobat melihat tampilan di blog Orido . Floating images di sana adalah animasi flash ! Dengan flash , tampilan floating images kita jadi lebih keren (meski waktu loading blog kita bertambah). Sobat juga dapat menampilkan floating images dengan animasi flash. Caranya sbb:

tetapkan di mana animasi flash-nya akan ditampilkan, apakah di atas kiri, bawah kiri, atas kanan atau bawah kanan.
cari animasi flash yang ingin sobat tampilkan. di Blog orido ada banyak animasi flash yang bagus. ada yang bernuansa islami atau bernuansa nasionalis
Saya ambil contoh animasi flash ” Jam Garuda Pancasila” . Tampilannya seperti ini :

Kode HTML dari animasi flash ” Garuda Pancasila ” diatas adalah:

<div style=”text-align:center;width:200px;height:200px;margin:0 auto;”>[/gigya width=”200″ height=”200″ src=”http://www.widgipedia.com/widgets/orido/Jam-Garuda-Indonesia-4639-8192_134217728.widget?__install_id=1248327469976&__view=expanded” quality=”autohigh” loop=”false” wmode=”transparent” menu=”false” allowScriptAccess=”sameDomain” ]</div></p>

Saya akan menempatkan jam Garuda Pancasila tsb di atas kanan blog saya. Kode HTML-nya setelah digabung dengan kode HTML Floating Images menjadi:

<code><a style=”position:fixed;top:40px;right:5px;”><div style=”text-align:center;width:200px;height:200px;margin:0 auto;”>[/gigya width=”200″ height=”200″ src=”http://www.widgipedia.com/widgets/orido/Jam-Garuda-Indonesia-4639-8192_134217728.widget?__install_id=1248327469976&__view=expanded” quality=”autohigh” loop=”false” wmode=”transparent” menu=”false” allowScriptAccess=”sameDomain” ]</div></a></code>

Bang Red… gue pengen ada ‘spiderman’ di pojok atas kiri blog gue kayak di blog Orido itu. Kodenya ?

<code><a style=”display:scroll;position:fixed;top:5px;left:5px;”><div style=”text-align:center;width:200px;height:300px;margin:0 auto;”>[/gigya width=”200″ height=”300″ src=”http://www.widgipedia.com/widgets/orido/RedSpidey-5671-8192_134217728.widget?__install_id=1248327469976&__view=expanded” quality=”autohigh” loop=”true” wmode=”transparent” menu=”false” allowScriptAccess=”sameDomain” ]</div></a></code>

Bang Red… gue mau ada jam digital di pojok kiri atas blog gue, sama kayak punyamu. gimana caranya bang? Aduh nak nak… kamu ini maunya buanyaaaaak banget seeehh 😀

<code><a style=”position:fixed;top:40px;left:5px;”><div style=”width:120px;height:40px;margin:0;”>[/gigya width=”120″ height=”40″ src=”http://www.clocklink.com/clocks/5005-black.swf?TimeZone=JOG&” width=”120″ height=”40″ wmode=”transparent” type=”application/x-shockwave-flash”” quality=”autohigh” loop=”false” wmode=”transparent” menu=”false” allowScriptAccess=”sameDomain” ]</div></a></code>

Cara Pasang:

masuk ke wp-admin -> tampilan -> widget
drag widget teks ke bagian sidebar
lalu copy paste kode HTML di atas ke widget tersebut
hapus tanda ” / ” agar kode HTML dapat berjalan dengan benar
mohon sesuaikan width dan height agar pas dgn widget anda
Tambahan: semua floating images dapat ditempatkan dalam 1 widget text.
Ini adalah hasil coba-coba saya sendiri dan ternyata berhasil 🙂 Silahkan sobat eksperimen di blog sendiri .