IMAGE JADI SAMAR KETIKA KURSOR DIATASNYA

Image yang ditampilkan akan menjadi buram/samar ketika kursor berada diatasnya.

Demo : Lihat Disini

Silahkan anda simak langkah-langkahnya.

1. Langkah Pertama




• Masuk ke Blogger dengan ID anda.
• Pilih Rancangan.
• Pilih Edit HTML.
• Cari kode ini ]]></b:skin> pada template anda.
• Copy kode dibawah ini kemudian paste 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;}


• Klik tombol Simpan Template



2. Langkah Kedua



• Siapkan alamat sebuah image yang telah dilengkapi dengan target link (URL yang dituju), misalnya :
  
  
  <a href="http://epg-studio.blogspot.com"><img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Emo/th_2-1.jpg"></a>


• Jika image tersebut ingin disamarkan ketika kursor berada diatasnya, tambahkan kode class="linkopacity" pada alamat image diatas, misalnya :
  
  
  <a href="http://epg-studio.blogspot.com"class="linkopacity"><img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Emo/th_2-1.jpg"></a>


• Jika image tidak memiliki target link, buatlah seperti contoh dibawah ini :
  
  
  
  <a href="#nogo" class="linkopacity"><img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Emo/th_2-1.jpg"></a>
  
  
  
  Perhatikan huruf yang bercetak merah adalah yang harus anda tambahkan.
  


3. Selamat mencoba , semoga bermanfaat...!!!

---

Jika artikel ini bermanfaat..? Bagikan lewat :

BACA JUGA ARTIKEL DIBAWAH INI