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.

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:
<br /> <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>

Hasilnya:
Coba Anda dekatkan mouse pada tulisan "LINK SUKSES" di Bawah! Perubahan warna latar tulisan menjadi merah dan huruf menjadi putih disebabkan pengaruh CSS pada template blog Link Sukses.

LINK SUKSES

Kode HTML untuk effect image nudging:
<a class="gerakan" href="http://www.linksukses.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!

Sumber:

1. Tutorial : Indahnya Berbagi pada posting Menambahkan effect link nudging pada blogger dengan CSS3
2. Foto : Free Photo For Blogger

Selamat mencoba dan Semoga bermanfaat.