CSS & jQuery Link Nudging

Udah Lama gk Posting, Kali ini saya mau POsting Cara Bikin Efek Nudging Pada Link, Lansung Aja ya, Billing Mau abis Nee ..

Cekidot


1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Tag ]]></b:skin>
4. Masukan Kode CSS Di bawah ini di atas Tag Tadi :

    #nudging-f403 li a {
    -moz-transition: all 0.30s ease-out;  /* FF4+ */
    -o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.30s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.30s ease-out;  /* IE10? */ 

    -moz-transition-duration: 1s;}
    #nudging-f403 li a:hover {
    padding-left: 100px;
    }

5. Save Template
6. Berikut adalah Kode HTMLnya

<div id="nudging-f403">
<li><a href="#">Tautan Satu</a></li>
<li><a href="#">Tautan Dua</a></li>
<li><a href="#">Tautan Tiga</a></li>
<li><a href="#">Tautan Empat</a></li>
</div>

 DEMO :

Link Pertama

Link Kedua 

*eNBe : Anda harus Ganti Versi Web anda dlu ya, klo gk EFEKnya GK ADA

jQuery

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> 

Letakan Kode CSS berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

6. Save template

7. Untuk Kode HTML, di bawah ini :

<a class='linknudge' href='http://forbiden-403.blogspot.com/'>[./Forbiden-403] | Share And Enjoy</a>

DEMO :
[./Forbiden-403] | Share And Enjoy
Segitu aja ya, Insyaallah bermanfaat.
Tunggu Tutorial lainya ya ,,