Menambahkan Efek Link Nudging Pada Blogger

proBlogiz

---

Desain Blog  kali ini akan membagi cara menambahkan Efek Link Nudging pada sebuah objek, bisa digunakan pada gambar (Link Image) ataupun tulisan (Link Text). Efek Nudging atau juga disebut "efek bergoyang" adalah efek animasi jika Anda mengarahkan pointer/mouse pada link.. Efek link nudging seperti bergerak, bergoyang atau bergeser ketika mouse over (cursor diatasnya), bisa diterapkan pada tulisan / teks di halaman posting, judul artikel, animasi pada objek gambar atau juga pada widget ( misalnya BlogArchive widget, Label widget, Sitemap dan yang lain).

Efek Link Nudging pada Blogger dapat dibuat dengan hanya menggunakan kode CSS saja atau memakai kode script jQuery (umumnya pada widget), -keduanya- disertai dengan penambahan nilai padding-left atau margin-left untuk menghasilkan efek nudging - bergerak / bergeser dari kiri ke kanan.

Baiklah kita langsung menuju ke tutorialnya, namun sebelumnya Anda bisa melihat contoh/demo dibawah :

Efek Link Nudging pada tulisan atau Link Text 

Menu Navigasi Horizontal Keren

Cara Buat Text Berjalan atau Marquee

Tombol / Button Keren Dengan CSS

Arsip Widget Kalender untuk Blogger

Menu Navigasi Horizontal Efek Lavalamp

 Efek Link Nudging pada gambar Link Image

Menambahkan Efek Link Nudging dengan Kode CSS

Pasang CSS code di Template Blogger

Masuk Blogger > Template > Edit HTML
Tekan Control + F > Cari tag ]]></b:skin>
Letakkan kode CSS berikut diatas tag ]]></b:skin>

/*--- Efek Link Nudging---*/
.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;
}

Kemudian Save Template

Kostum:
ganti nilai-nilai 25px dan 5px untuk mengubah ukuran margin dan padding link 

Menambahkan Efek Nudging pada Halaman Postting

1. Menambahkan Efek Nudging pada Link Text (tulisan)
    Gunakan kode HTML berikut :

<a href="Link Text URL" class="nudge">Your text</a>

Untuk hasil dapat Anda lihat contoh "Efek Link Nudging pada tulisan" diatas.

2. Menambahkan Efek Nudging pada Link Image (gambar)
    Gunakan kode HTML berikut :

<img src="Link Image URL" border="0" alt="Image Description" class="nudge"/>

Menambahkan Efek Link Nudging dengan Script jQuery

Biasanya Efek Link Nudging  dengan script jQuery diterapkan pada widget BlogArchive, widget Label,
pada Blogger. Sebagai contoh pada widget BlogArchive,  Efek Link Nudging menggunakan kode script jQuery berikut dibawah :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#BlogArchive1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

Letakkan kode jQuery tersebut diatas tag </head>.

Masuk Blogger > Template > Edit HTML
Tekan Control + F > Cari tag </head>.
Save Template

note :

jika pada template Anda sudah memiliki script jQuery "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>" maka tidak perlu memasangnya lagi,cukup satu saja.

perhatikan kode yang berwarna hijau #BlogArchive1 , ini nama widget  yang diberi efek nudging. Jika Anda menghendaki pada widget Label, ganti saja dengan #Label1 dan seterusnya.

Bagaimana sobat, tertarik membuatnya? proses membuatnya juga mudah kan?
Atau Anda bisa bertanya di form komentar jika menemukan kesulitan terkait cara Menambahkan Efek Link Nudging Pada Blogger diatas.

Salam
Semoga bermanfaat.