Link dan Gambar Bergerak Dengan CSS

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.

Login ke Blogger
Di bagian Tab Design/ Rancangan pilih Edit HTML
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.
Simpan/ Save
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:

<style>
.gerakan  { 
-moz-transition: all 0.4s ease-out;   
-o-transition: all 0.4s ease-out;   
-webkit-transition: all 0.4s ease-out;   
-ms-transition: all 0.4s ease-out;   
transition: all 0.4s ease-out;   
} 
.gerakan:hover  { 
margin-left: 50px; 
padding-left: 5px; 
}
</style>

Kode HTML untuk effect text link nudging:

<a href="URL link di sini" class="gerakan">Ini adalah text link bergerak</a>

Kode HTML untuk effect image nudging:

<a class="gerakan" href="http://www.mahasiswalugu.blogspot.com/"><img src="URL Link image di sini" border="0" alt="Deskripsi image di sini" /></a>

Hasilnya:
Coba Anda dekatkan mouse pada gambar di bawah!

Mahasiswa Lugu