Selamat malam semuanya. Kali ini saya akan membahas sedikit tentang image effect. Sebelum kita mulai, coba anda lihat About Me yang ada di atas postingan ini. Perhatikan gambar saya. Gimana? Ganteng kan? Hehehe... Tapi bukan itu tujuan anda melihatnya. Coba perhatikan lagi gambarnya baik2... Gimana? Ada yang berbeda dari gambar biasa kan? Coba anda arahkan mouse anda ke gambar tersebut? Gimana? Ada yang beda lagi? Benar, sebelum anda mengarahkan mouse gambar tersebut terlihat samar, tapi setelah mouse diarahkan tampilan gambar menjadi full (sehingga kelihatan banget ganteng nya saya ini, hehehe...). Itulah yang dinamakan dengan efek blur. 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="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" 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="http://tipsbloggerzacky.googlecode.com/files/50000.jpg" style="width:375px;height:184px;border:none"/></a>

Hasilnya:


Selamat mencoba...

Jangan lupa kasih komentar ya...