Cara Membuat Efek Blur Pada Gambar

Cara Membuat Efek Blur (Samar) Pada Gambar

1. Login ke blogger
2. Klik Tata Letak
3. Klik Edit HTML.
4. Backup dulu template anda untuk jaga-jaga kalau salah
5. Centang Expand Template Widget
6. Gunakan ctrl+F untuk mencari kode ]]></b:skin>
7. Letakkan kode berikut di atas kode ]]></b:skin>


.linkopacity img {
filter:alpha(opacity=20);
-moz-opacity: 0.20;
opacity: 0.20;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
  
8. Simpan Template

Keterangan :

Semakin rendah nilai opacity pada teks warna merah diatas, maka akan semakin samar/kabur tampilan gambar tersebut.

Untuk membuktikan efek dari kode diatas bekerja apa tidak, silahkan anda buat satu postingan dan sisipkan kode seperti ini pada postingan yang bergambar. Kode dibawah ini berlaku untuk selamanya pada setiap postingan yang anda pasang gambar (gambar samar/blur menjadi terang)

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

Dan terakhir jangan lupa di save guys :D