-->
Iklan

Menambahkan Effect Link Nudging Pada Bloger Dengan CSS3

Posted by sunariyo on Friday, June 24, 2011

pada image. Berikut langkah-langkah menambahkan effect link nudging pada blogger
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 

Catatan : tadi saya posting buat tabel dan ini buat alamat atau image yang mw anda buat...

Previous
« Prev Post

Related Posts

8:46 AM

0 komentar:

Post a Comment