Memberi Efek Blur Pada Gambar


Selamat malam semuanya. Kali ini saya akan membahas sedikit tentang image effect. Yang dimana image ingin dibuat efek samar. Mau tau cara membuat nya?

Berikut Cara Membuat Efek Blur:

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode ]]></b:skin>, lalu paste kode css berikut di atasnya:

a.linkopacity img {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;\
}

a.linkopacity:hover img {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

4. Klik Save Template.

Cara Menggunakannya:
Misalnya kode gambar anda seperti:

<img src=”URL_GAMBAR_ANDA” border=”0″/>

Untuk membuat efek blur, kita harus memasukkan kode gambar tersebut ke dalam tag <a> dengan class=”linkopacity”. Maka kode tersebut akan menjadi seperti:

<a class=”linkopacity”><img src=”URL-GAMBAR_ANDA” style=”width:375px;height:184px;border:none”/></a>

Hasilnya :


Selamat mencoba…

Jangan lupa kasih komentar ya..

Iklan