Animasi Goyang Link Sidebar (jQuery Nudging Link)

Beberapa hari ini Blogger Tune-Up disibukan dengan masalah didarat, sehingga artikel yang masih dalam proses menjadi tertunda untuk di terbitkan. Trial and error Blogger Tune-Up beberapa hari ini adalah memecahkan "ke-egoan" Mac OS X agar dapat dipaksa untuk ditanamkan pada komputer berotak Intel. Hal ini justru menjadi bumerang bagi komputer sendiri, dan harus rela kehilangan beberapa data jQuery yang cukup penting. Sambil menunggu komputerku kembali normal setelah mengalami beberapa masalah sehingga beberapa file jQuery menghilang entah kemana, sekarang kita akan membuat link pada sidebar bergoyang-goyang apabila mouse kita arahkan (hover). Ya lumayanlah untuk refresh sambil meredakan ketegangan dan kebingungan akibat kehilangan data. Let's begin...!!!

Animasi Goyang Link Sidebar

Animasi Goyang Link Sidebar dengan jQuery

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini tepat diatas kode pada langkah 3:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
var $jnoc = jQuery.noConflict();
$jnoc(document).ready(function(){
var Duration = 250;
$jnoc('.widget-content ul li a').hover(function() {
$jnoc(this).animate({ paddingLeft: '20px' }, Duration);
}, function() {
$jnoc(this).animate({ paddingLeft: '0px' }, Duration);         
});
});

Langkah 5
Simpan Template dan Preview... (Yuhuy.... mari bergoyang...)

Download jQuery Nudging Link Animation

Keterangan:

1. Ubah nilai 250 (satuan milidetik) untuk mengatur kecepatan gerakan animasi (Baris 4)
2. Ubah nilai 20 untuk menentukan jarak gerakan animasi (Baris 6)
3. Script jQuery ini sudah ditambahkan "jQuery No Conflict"
4. Jika gagal ubah .widget-content dengan .sidebar (Baris 5)