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 :

* Yang perlu anda perhatikan adalah bagian ID label1 , bisa saja nama ID label  pada blog anda label2, dst.

* Untuk bisa menentukkan nama dari ID lihat atau cari seperti kode dibawah ini:

   <b:widget id='Label1' locked='false' title='Label' type='Label'/>

* yang berwarna biru itu adalah nama ID nya, jadi tinggal disesuaikan saja nama ID nya pada bagian langkah Ke-3.
  
4. Simpan.