Membuat Efek Link Nudging Dengan Kode CSS - Hallo sobat Willy Maulana Blog Kali ini saya memposting tentang Membuat Efek Link Nudging Dengan Kode CSS.langsung aja ke TKP
jika anda ingin menambah efek pada
posting atau widget. Efek link nudging adalah efek yang membuat objek
bergeser ketika mouse over (cursor diatasnya). Efek ini bisa diterapkan
di gambar ataupun tulisan. Ada juga yang menerapkan efek ini pada label
(biasanya daftar label yang vertikal). Link nudging yang kita buat ini
tidak membuat blog anda menjadi berat jadi tidak usah kuatir dengan
loading blog anda. Bagaimana menurut anda, jika tertarik untuk
membuatnya langsung saja ikuti trik yang satu ini:
1. Masuk ke Rancangan --> Edit HTML
2. Tambahkan kode 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;
}
3. Simpan template anda
4. Untuk menambahkan link nudging pada postingan tambahkan kode berikut ini:
Link Nudging pada Text
<a href="Disini letakkan URL" class="nudge">Disini tambahkan teks</a>
Link Nudging pada Gambar
<img src="Link image letakkan disini" border="0" alt="Deskripsi image letakkan disini" class="nudge"/>
Keterangan:
- Ganti kalimat "Disini letakkan URL" dengan link anda
- Ganti kalimat "Disini letakkan teks" dengan teks yang ingin ditampilkan
