Menambahkan Effect Link Nudging Pada Bloger Dengan CSS3

1. Sign in ke account anda
2. Pada dasbor => Rancangan / Design => Edit HTML
3. Back up template anda
4. Tambahkan code berikut diatas kode ]]></b:skin>

/*--- Link Nudging Effect ---*/
.nudge  { 
-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;   
} 
.nudge:hover  { 
margin-left: 25px; 
padding-left: 5px; 
}

5. Simpan template
Selanjutnya untuk melihat effect ini bekerja pada postingan, anda cukup memasukkan beberapa kode berikut dalam tab HTML pada post editor.
Untuk Link Nudging gunakan kode berikut:

<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>

Yang diganti dari kode diatas:

• Ganti kalimat "Disini letakkan URL" dengan link anda
• Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan pada link anda

Untuk Image Nudging gunakan kode berikut

<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>

Yang diganti dari kode diatas:

• Ganti kalimat "Link image letakkan disini" dengan URL dari image anda
• Ganti kalimat "Deskripsi image letakkan disini" dengan deskripsi yang ingin ditampilkan pada image anda

Silahkan lihat hasilnya diblog anda!