MAT-5F-1453

Animasi Blog

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.

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

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

contoh:  <a style=”position:fixed;bottom:10px;left:30px;” href=”//nanoxx.wordpress.com/” target=””_blank””><img src=”http://bucektijaroti.com/animasipowerpoint/wp-content/uploads/2011/09/Bird_hatches.gif&#8221; alt=”” /></a>

Posisi bawah-kanan

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

contoh:  <a style=”position:fixed;bottom:10px;right:5px;” href=”//nanoxx.wordpress.com/” target=”_blank”><img src=”http://tiksmpn2kebasen.files.wordpress.com/2011/10/ag00278_.gif&#8221; alt=”” /></a>

Posisi atas-kiri

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

contoh:  <a style=”position:fixed;top:30px;left:0;” href=”//nanoxx.wordpress.com/” target=”_blank”><img src=”http://bucektijaroti.com/animasipowerpoint/wp-content/uploads/2011/09/Bird_2.gif&#8221; alt=”” /></a>

Posisi atas-kanan

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

contoh:  <a style=”position:fixed;top:10px;right:0;” href=”//nanoxx.wordpress.com/” target=””_blank””><img src=”http://fitr4y.files.wordpress.com/2011/05/eagle2.gif&#8221; alt=”” /></a>

Keterangan:

Tulisan yang saya warnai dengan warna merah itu link yang akan di klik atau di tuju, misalnya https://nanoxx.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.

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

Semoga membantu.

Tinggalkan komentar