Membuat efek Link Nudging Pada Label dengan CSS3

Untuk yang kali ini saya postingkan tentang efek Link nudging atau link yang memiliki efek bergeser saat disorot dengan kursor,sebelum membuatnya jangan lupa tambah gadget Label terlebih dahulu jika belum ada gadget labelnya.

Untuk cara membuatnya ikuti langkah-langkah berikut :

1. Login blogger

2. Rancangan, Elemen laman

3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#label1 .widget-content ul li :hover {margin-left: 10px;

padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);

-moz-transition: all 0.70s ease-out; /* FF4+ */

-o-transition: all 0.70s ease-out; /* Opera 10.5+ */

-webkit-transition: all 0.70s ease-out; /* Saf3.2+, Chrome */

-ms-transition: all 0.70s ease-out; /* IE10? */display: block;

}

Tambahan :