TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Membuat Efek Gambar Samar Blur

Original by IFX Adrian | 07 Januari 2010 2 Comments

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...

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

2 komentar:

Rudy Hartono 29 Juni 2012 23.14  

makasih infonya sangat bermanfaat sekali, nice posting

mewarnai kendaraan 9 Juli 2013 14.49  

Hasilnya bukan blur ya mas, tapi transparan.

Posting Komentar