CSS & jQuery Link Nudging

http://4.bp.blogspot.com/-5VVGnWLtIDE/Tge6E_2sXqI/AAAAAAAAAU0/loJTIbbO3P4/s320/css.png
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 :



*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 ,,

4 ... Skip ke Kotak Komentar

10 Februari 2012 18.09

nice sob

11 Februari 2012 12.22

Oke sob, monggo di Coa :D

12 Februari 2012 06.28

kalo mau dikasih di label gmn sob??

12 Februari 2012 06.32

klo mau di kasih ke Label, Harus pke CSS3 sob, .. :D
saya lagi posting nee sob ..

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]