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.

Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.

Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.