0 Cara Membuat Efek Blur Pada Gambar

Do you want to share?

Do you like this story?

Cara Membuat Efek Blur Pada Gambar - Salah satu effek pada image/gambar yang sering para blogger gunakan adalah effek blur pada gambar. Contoh effek blur pada gambar, lihat pada halaman berikut

Klik di sini untuk menuju pada halaman "Contoh Gambar dengan effek blur"

Nah, pada halaman tersebut, Sobat akan melihat 2 contoh gambar tanpa effek dengan gambar effek blur. Maksud dari effek blur adalah "jika cursor melintas pada gambar, maka gambar akan berubah menjadi agak keburam-buraman", lebih jelasnya tuju halaman contoh di atas.
Langsung ke tutorial pembuatannya,

• Masuk ke blogger
• Buka design/Rancangan
• Pilih Edit HTML
• Lalu cari kode ]]></b:skin> (gunkaan Ctrl + f )
• Setelah ketemu, letakkan kode berikut tepat di atas 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;}

Note : untuk merubah tingkat keburaman, ubah angka 30 

• Simpan

Untuk contoh gambar effek blur dapat Sobat lihat pada halaman ini
Nah, sekarang tutorial cara membuat gambarnya, seperti


Jika Sobat hendak meng-upload gambar pada halaman post blogger,

Jika telah selesai mengupload, lalu buka Edit HTML, maka Sobat akan menemui kode

<a href="http://2.bp.blogspot.com/_3Y_7B2fCKMs/TDiZf3WUfCI/AAAAAAAAA9c/EotwizhMw_Y/s1600/blur1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_3Y_7B2fCKMs/TDiZf3WUfCI/AAAAAAAAA9c/EotwizhMw_Y/s320/blur1.jpg" /></a>

Note : warna merah adalah alamat gambar yang sudah Sobat upload. Di atas adalah kode gambar tanpa effek,

Nah, untuk menambahkan effek blur, maka tambahlah kode class="linkopacity", jadi seperti ini

<a href="http://2.bp.blogspot.com/_3Y_7B2fCKMs/TDiZf3WUfCI/AAAAAAAAA9c/EotwizhMw_Y/s1600/blur1.jpg" class="linkopacity" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_3Y_7B2fCKMs/TDiZf3WUfCI/AAAAAAAAA9c/EotwizhMw_Y/s320/blur1.jpg" /></a>

Hasilnya gambar akan blur jika disorot dengan mouse, lihat pada halaman ini

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari bzz di inbox anda:
Muadz-bzz.blogspot.com