Cara Membuat Efek Blur Pada Gambar di Blog

Pada postingan kali ini saya akan membahas bagaimana Cara Membuat Efek Blur Pada Gambar di Blog, Foto ataupun Banner yang ada di Blog.
Efek Blur akan terjadi apabila Cursor melintas pada Objek tersebut.
Efek ini berlaku untuk semua Objek gambar, baik itu Gambar yang disertai dengan link ataupun gambar yang tidak disertai dengan link.

Berikut cara memasangnya :

1. Login ke Blogger

2. Klik Rancangan → Edit HTML

3. Klik tulisan Download Template Lengkap

4. Silahkan Save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

5. Beri tanda centang pada kotak di samping tulisan Expand Template Widget

6. Kemudian cari kode ]]></b:skin>
   Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

7. Kemudian Copy kode dibawah ini dan Paste diatas nya
   .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;}

8. Jika sudah SIMPAN TEMPLATE
   Berikut contoh penerapan :

• Gambar biasa :
  
  Kode gambar
  <a href="http://id-id.facebook.com/people/Maz-Imtikhan/100000207472417"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>

• Gambar dengan efek blur dengan link :
  
  Kode gambar :
  <a href="http://id-id.facebook.com/people/Maz-Imtikhan/100000207472417" class="linkopacity"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>

• Gambar dengan efek blur tanpa link
  
  Kode gambar :
  <a href="#nogo" class="linkopacity"><img border="0" src="http://i1002.photobucket.com/albums/af149/Imtikhan/Imtikhan_facebook-1.png"></a>

Selamat mencoba.

Sumber : tiptrikblogger

Posted in: Blogger Tutorial , Cara Membuat Efek Blur Pada Gambar di Blog