Assalamualaikum...!!!Pernahkah kalian mengunjungi sebuah blog yang menampilkan gambar, kemudian apabila kursor kita diarahkan ke gambar tersebut akan ada efek seperti ketika sebuah button diklik...???Untuk lebih jelasnya coba kalian arahkan pointer/cursor kalian di ke dua gambar berikut :

Gambar 1


Gambar 2

1. Login ke akun blogger sedulur
2. Pada halaman Dasbor klik Rancangan >> Edit HTML >> jangan lupa centang option box Expand Template Widget
3. Kemudian cari kode sperti ini  ]]></b:skin> [untuk mempermudah pencarian kode tekan Ctrl+F atau F3], apabila sudah ketemu kalian copy kode berikut dan taruh tepat diatas kode tadi:
   

   .linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
   .linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

4. Simpan template...
5. Nah untuk memberikan efek hover pada gambar gimana...!!!, tenang...kalian hanya butuh menambahkan kode class="linkopacity" pada setiap gambar yang ingin diberikan efek hover, contoh :
   

   <a class="linkopacity" href="http://gyanfs87.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWyNwKYtdjLnrrpovCG62c-XgnM5eEoWFlByRdZX4ZNe4vYrNHFqgimn8dUMumuAOXLXRNeWzd5bfo0OXcGPuuHOLAR0iIh5uJ6n4UBWcS_BDRoUD91wtFw45an6SOjEWAi35Jfd40F4/s200/41590_225027882377_5584_n.jpg" /></a>

6. Mudahkan...nah untuk pembuatan efek hover pada area tertentu seperti area Blockquote akan saya bahas dilain kesempatan...semoga bermanfaat