Home » , , » Link dan Gambar Bergerak Dengan CSS

Link dan Gambar Bergerak Dengan CSS

Di tulis oleh Ifan Prabowo pada Sunday, February 26, 2012 | 2:49 AM

Effect nudging pada teks dan pada gambar dapat terhilat ketika pointer mouse didekatkan pada teks atau gambar yang bersangkautan. Objek berupa teks dan gambar tersebut akan bergerak saat pointer mouse mendekat dan akan kembali ke semula ketika pointer mouse menjauh.

Berbeda dengan animasi teks dan animasi gambar sebelumnya, efek gerakan (nudging) kali ini tidak menggunakan program Javascript tetapi menggunakan CSS3. Kode CSS tersebut dapat diletakan di bagian HTML bersama dengan kode CSS lainnya, pada widget, atau bersamaan dengan posting. 

Langkah-langkah membuat effek nudging pada Blogger:
Sebaiknya back-up template blog sebelum melakukan edit HTML untuk jaga-jaga kalau terjadi error. 

  1. Login ke Blogger
  2. Di bagian Tab Design/ Rancangan pilih Edit HTML
  3. Cari kode CSS, biasanya di atas kode ]]></b:skin> kemudian salin Kode CSS di bawah diantara <style> dan </style>, kemudian letakan kode CSS tersebut tepat di atas kode bersama (<style> dan </style> pada kode CSS di bawah tidak perlu ikut dikopikan). Kode CSS tersebut dapat juga diletakan pada Widget Blogger (add gadget) atau pada posting. Pada opsi kedua dan ketiga <style> dan </style> harus ikut dikopikan.
  4. Simpan/ Save
  5. Di bagian posting, tulis kode HTML di bawah sesuai kebutuhan, jika akan memberi efek pada tulisan, gunakan kode HTML untuk effect text link nudging, sedangkan untuk gambar gunakan kode HTML untuk effect image nudging
Kode CSS:


Kode HTML untuk effect text link nudging: 



Kode HTML untuk effect image nudging: 


Hasilnya:
Coba Anda dekatkan mouse pada gambar di bawah! 





Contohnya









Share this article :
Baca Juga Yang Ini !!

Dapatkan artikel terbaru dari " Mahasiswa Lugu ".

Masukan Email anda disini :


0 comments:

Post a Comment

:: MAHASISWA LUGU ::
Just share and save my story

 
Support : Maskolis | RMC | Naeza
Copyright © 2012. Mahasiswa Lugu - All Rights Reserved
Webmaster by Ifan Prabowo