Seputar Wordpress

Membuat Gambar melayang di WordPress.com

Gambar Melayang atau Floating Image adalah gambar yang posisinya selalu tetap/tidak bergeser ketika mouse kita gerakkan keatas ataupun kebawah.(kurang lebih begitu).

Contohnya bisa Anda lihat di pojok kanan atas halaman utama blog ini dan disebelah kiri halaman ini. Selain membuat blog Anda tampak cantik, gambar itu juga dapat mengarah ke halaman yang ingin anda tuju. misalnya gambar burung elang di sebelah kiri ini linknya menuju tutorial membuat-text-berjalan-dengan-file-swf/, itu lho tulisan berjalan dibawah halaman seperti text berjalan di TV-TV itu. he.he . . .

Anda dapat memasang linknya tetap berada di blog anda sendiri dan bisa juga mengarah ke alamat blog yang lainnya.

Lalu bagaimana cara memasangnya?


Copy code berikut lalu pastekan ke mode html halaman/tulisan baru jika ingin memasangnya di halaman Anda saja dan untuk memasang di halaman utama anda harus memasang di widget teks di sidebar Anda.

Posisi bawah-kiri

<div style="display:scroll;position:fixed;bottom:0;left:0;"><a href="URL link yang dituju" terget="_blank">
<img src="URL gambar berada
" />
</a></div>

Posisi bawah-kanan

<div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="URL link yang dituju" target="_blank">
<img src="
URL gambar berada" />
</a></div>

Posisi atas-kiri

<div style="display:scroll;position:fixed;top:0;left:0;"><a href="URL link yang dituju" target="_blank">
<img src="URL gambar berada
" />
</a></div>

Posisi atas-kanan

<div style="display:scroll;position:fixed;top:0;right:0;"><a href="URL link yang dituju" terget="_blank">
<img src="
URL gambar berada" />
</a></div>

Keterangan:

Tulisan yang saya warnai dengan warna merah itu link yang akan di klik atau di tuju, misalnya http://irfanhandi.wordpress.com/ nah kalau yang warna biru itu tempat url dimana letak gambar tersebut berada, misalnya: http://fitr4y.files.wordpress.com/2011/05/eagle2.gif

Demikian cara pasang floating images atau gambar melayang ini, jika kurang jelas mari kita sama-sama bahas.

Untuk Mas Andan yang sempat bingung, mungkin ini jawabannya.

Ternyata kalau dipasang di halaman scriptnya berubah menjadi sepert ini:

Unduh disini

Coba pastekan code diatas di halaman/tulisan baru di mode html kemudian lihat hasilnya di mode visual.

Semoga membantu.

Sumber Gambar: Fitr4y’s Blog

About these ads

Tentang Irfan Handi

Seorang Ayah yang Hanya Ingin Berbagi. Hobi mendengarkan Lagu Sasak Tulen. Bagi Anda yang ingin mengetahui lebih jauh tentang Budaya sasak, silahkan mengunjungi http://lagusasaktulen.blogspot.com/

Diskusi

17 Tanggapan to “Membuat Gambar melayang di WordPress.com”

  1. udah saya praktekkan mas
    mksh ya :)

    Posted by nanangchairudin | September 22, 2011, 6:24 am
  2. Bisa ga ya?
    Coba dulu ah…

    Posted by Riyan | September 23, 2011, 2:14 pm
  3. bagus kayaknya.. perlu dicoba nih… Gambar juga bisa ya.

    Posted by wibisono | September 25, 2011, 3:57 am
  4. Like… Ini Boot2blog ya? saudaranya Bootingskoblog hahaha :D

    Posted by Aryan | September 28, 2011, 5:43 pm

Trackbacks/Pingbacks

  1. Ping-balik: Wordpress « Aryansetiawan Blog - September 29, 2011

  2. Ping-balik: Widget Wordpress « Aryansetiawan Blog - September 29, 2011

Kategori

artikel menarik lainnya

Powered by Wordpress ~ Designed by WooThemes ~ Redesigned by Irfan Handi
Jump To Top
%d bloggers like this: