Cara Membuat Efek Blur (Samar) Pada Gambar
1. Login ke blogger
2. Klik Tata Letak
3. Klik Edit HTML.
4. Backup dulu template anda untuk jaga-jaga kalau salah
5. Centang Expand Template Widget
6. Gunakan ctrl+F untuk mencari kode ]]></b:skin>
7. Letakkan kode berikut di atas kode ]]></b:skin>
.linkopacity img {
filter:alpha(opacity=20);
-moz-opacity: 0,20;
opacity: 0.20; .20;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
filter:alpha(opacity=20);
-moz-opacity: 0,20;
opacity: 0.20; .20;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
8. Simpan Template
Keterangan :
Semakin rendah nilai opacity pada teks warna merah diatas, maka akan semakin samar/kabur tampilan gambar tersebut.
Untuk membuktikan efek dari kode diatas bekerja apa tidak, silahkan anda buat satu postingan dan sisipkan kode seperti ini pada postingan yang bergambar. Kode dibawah ini berlaku untuk selamanya pada setiap postingan yang anda pasang gambar (gambar samar/blur menjadi terang)
<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>
Jika scrip diatas tidak berhasil,silahkan pakai scrip yang dibawah ini:
<img src="url gambar" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>
Untuk melihat hasilnya akan saya cantumkan contohnya, dan mulailah mouse anda sorot ke gambar dibawah ini, yuk mulai :
Bagaimana menurut anda, sudah paham bukan? Maksud saya paham dengan gambar diatas, hehehe, ya udah selamat mencoba Cara Membuat Efek Blur Pada Gambar, semoga bermanfaat.
0 komentar:
Catat Ulasan