Memasang Link Nudging CSS

Assalamu'alaikum Wr.Wb.

Salam sejahtera selalu buat Bloggernize Mojang dan Bujang, Go Blog Go baru nongol lagi ? Share posting kali ini akan berbagi bagaimana cara-nya membuat link bergeser saat mouse berada tepat diatas link tersebut, namun cara ini tidak menggunakan Javascript
yang sedikit-nya akan membawa pengaruh terhadap beban muat (loading) blog. Ini dibuat berdasarkan CSS murni tanpa dipengaruhi dengan Javascript, langsung aja :

Login ke Blogger
Klik Monetize -> Template -> Edit HTML (jangan lupa back-Up template)
Cari Kode </b:skin> (gunakan Ctrl+F)
Copy Paste kode CSS dibawah ini sebelum Kode Tag </b:skin>

#nudge li a { 
cursor: pointer; 
-webkit-transition: padding-left 250ms ease-out; 
-moz-transition: padding-left 250ms ease-out
} 
#nudge li a:hover { 
padding-left: 20px
}

Cara penggunaan-nya :
Apabila ditempatkan didalam template

<ul id='nudge'> <li><a href='LINK_1'>Nama_LINK_1</a></li> <li><a href='LINK_2'>Nama_LINK_1</a></li> <li><a href='LINK_3'>Nama_LINK_1</a></li> <li><a href='LINK_4'>Nama_LINK_1</a></li> </ul>

Jangan lupa ganti tulisan LINK_1 dengan LINK Anda, Contoh-nya seperti Menu Navigasi WebBlog Saya ini.

Segitu aja Mojang dan Bujang cara-nya ringan dan nda ribet. Go Blog Go...!!! Amiin

Wassalam.