Cara Membuat Efek Photo Samar (blur)

 Bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

Langkah #1

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata letak.
3. Klik tab Edit HTML.
4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
5. Silahkan cari kode berikut : ]]></b:skin>
6. Copy paste kode berikut di atas kode ]]></b:skin>
   
   
   .linkopacity img {<br /> filter:alpha(opacity=30);<br /> -moz-opacity: 0.30;<br /> opacity: 0.30;<br /> border:0;<br /> }<br /> .linkopacity:hover img {<br /> filter:alpha(opacity=100);<br /> -moz-opacity: 1.0;<br /> opacity: 1.0;<br /> border:0;<br /> }<br /> .linkopacityxtra:hover img {<br /> filter:alpha(opacity=1.1);<br /> -moz-opacity: 1.1;<br /> opacity: 1.1;<br /> border:0;<br /> }
   
   
     
7. Klik tombol Simpan Template.
8. Langkah #1 selesai.

Langkah #2

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

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




Semisal gambar ini ingin nge link ke http://panduan-wongsalam.blogspot.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://panduan-wongsalam.blogspot.com" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :





Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :

<a href="#nogo" class="linkopacity"><img src="https://lh6.googleusercontent.com/-kjr_AeGJzqs/TdNCKLCe5JI/AAAAAAAAAhM/_WBAkcIoC_s/s512/11.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :





Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.

Tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh : .linkopacity img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; border:0; }      Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh : .linkopacity img { filter:alpha(opacity=10); -moz-opacity: 0.10; opacity: 0.10; border:0; }

Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don't miss it dude.


Variasi lain :
 
Foto efek blurr Dalam Binkai :

Secantik BIDADARI yang setia menemani diriku

Selamat berkreasi......Salam buat Senior Master Bloger