Membuat Efek Blur pada Gambar

Tutorial ini bukan tentang trik CorelDRAW, kita nge-blogger dulu sejenak, efek blur yang yang kita maksud disini cara kerjanya adalah apabila pointer mouse diarahkan diatas gambar maka akan menjadi jelas seperti gambar aslinya, ini hanya sekedar untuk mempercantik tampilan blog.

Cara membuatnya seperti dibawah ini;

• Login ke dashbord blogspot dengan gmail sampeyan tentunya
• Pilih Rancangan »» Edit HTML
• Tempatkan kode CSS berikut diatas kode ]]></b:skin>

.linkopacity img {filter:alpha(opacity=30); -moz-opacity:0.30 opacity:0.30; 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;} 

• Klik SIMPAN

Cara penulisan kode gambarnya seperti berikut;

<img src="http://alamat-gambar-sampeyan.jpg" class="linkopacity"/>

Perhatikan pada kode CSS yang berada diatas pada tulisan yang berwarna merah 30, disini sampeyan bisa merubah tingkat blur yang dihasilkan, yaitu semakin kecil nilai diatas maka akan semakin buram gambarnya.

Silahkan dicoba kalau sampeyan berkenan.