Jumat, 04 Maret 2011
Membuat Efek Blur Pada Gambar di Blogspot
Selamat pagi teman-teman blogger semua. Kali ini saya menulis tutorial ini pagi hari sekali, ya kira-kira jam 06.00 WIB. Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini. Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar. Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).
Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :
- Login ke Blogger dulu ya.
- Silahkan sobat tuju halaman Edit HTML.
- Kemudian cari kode ]]></b:skin>
- Letakkan kode berikut ini diatas / 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;}
Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :
<a href="http://freedownloadcopasthemes.blogspot.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0vO9VtXu7MkV6cDwqdZbA5ECJEawaUpSqGkSQEy3U8cpqtB7sUssLtH5oxmMnpk9J_IALzZ07xoROtn_RMisV_0PgVaunRPcuzgPr1JxhWj1-1_De45fPEcZUJo3GrAA5ND9Lsplp-c/s1600/empuss.jpg></a>
<a href="http://freedownloadcopasthemes.blogspot.com" class="linkopacity"><img src="img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0vO9VtXu7MkV6cDwqdZbA5ECJEawaUpSqGkSQEy3U8cpqtB7sUssLtH5oxmMnpk9J_IALzZ07xoROtn_RMisV_0PgVaunRPcuzgPr1JxhWj1-1_De45fPEcZUJo3GrAA5ND9Lsplp-c/s1600/empuss.jpg"></a>
Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.
<a href="#nogo" class="linkopacity"><img src="img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR0vO9VtXu7MkV6cDwqdZbA5ECJEawaUpSqGkSQEy3U8cpqtB7sUssLtH5oxmMnpk9J_IALzZ07xoROtn_RMisV_0PgVaunRPcuzgPr1JxhWj1-1_De45fPEcZUJo3GrAA5ND9Lsplp-c/s1600/empuss.jpg"></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 ya.
Label:
tutorial blog