7 Membuat efek blur pada gambar

Efek blur ini akan terlihat jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar,
Dan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada.

Caranya Silahkan ikuti langkah-langkahnya berikut ini :

1. Login ke Blogger
   
2. Silahkan menuju ke halaman Edit HTML.
   
3. Kemudian cari kode ]]></b:skin>
   
4. Letakkan kode css berikut ini diatas atau sebelum kode ]]></b:skin>

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

5. Simpan Template.

Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :

<a href="http://i-om.co.cc"><img src="http://img413.imageshack.us/img413/3023/headeriom.jpg" border="0" alt="Laptop"></a>

Tampilan normalnya seperti dibawah ini :

Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalah class="linkopacity" dan hasilnya seperti dibawah ini :

<a href="http://i-om.co.cc" class="linkopacity"><img src="http://img413.imageshack.us/img413/3023/headeriom.jpg" border="0" alt="Laptop"></a>

Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.

Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :

<a href="#nogo" class="linkopacity"><img src="http://img413.imageshack.us/img413/3023/headeriom.jpg" border="0" alt="Laptop"></a>

Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka “30” menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi “10” maka kodenya menjadi seperti berikut :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;}

Selamat mencoba :)

Label: Blogger, Tutorial Blog