Memberi Efek Atraktif pada Link | Link Nudging

Blog desain dengan link atraktif efek nudging , efek gerak jika kursor di arahkan pada link akan menambah kesan tersendiri dan membuat teks berkesan atraktif , mempercantik blog dengan efek nudging adalah salah satu bagian dari desain blog dengan bertujuan mempercantik dan kesan menarik dari suatu blog . salah satu contoh anda bisa arahkan mouse ke blog archive di bagian sidebar pada blog ini.


Cara yang bisa kita lakukan untuk membuat efek nudging adalah sebagai berikut.


* LOgin Blogger
*Edit Template / Edit HTML
* pada edit HTML / template cari kode ]]></b:skin>
* Copy kode dibawah ini lalu taruh diatas kode   ]]></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;
}

* Jika sudah Save / simpan template dan lihat hasilnya .

Untuk menambahkan suatu efek nudlink pada salah satu link silahkan ikuti tata cara berikut

<a href="Link Text URL" class="nudge">Teks anda di sini</a>

dan untuk memberi efek nudging pada gambar sebagai brikut

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

Jika ingin memberi efek nudging link pada salah satu widget silahkan gunakan ini

<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;#POPULAR POST li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

Kode ditas ini taruh diatas kode </head>

Huruf yang bercetak tebal adalah salah satu judul widget . judul widget yang ingin di beri efek nudging harus benar-benar sama persis dengan judul widget.
Jika yang ingin diberi efek adalah archive blog ganti popular post dengan archive blog, penulisan judul sama persis agar work.

Catatan : jika pada template kalian sudah terdapat script

 "<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>"

maka kalian tidak perlu mengikutkan script jaquery lagi , pada template cuma perlu hanya satu script jquery/1.3.2/jquery.min.js

Sekian semoga berhasil , dan bermanfaat bagi sobat semua .