;

19 December 2011

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.


ping fast  my blog, website, or RSS feed for Free

Author : Zainoel Arifin Isa'i

Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan belantara atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas/ freelance yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil dilereng gunung Arjuno.
Facebook : -Mbah Djojo-


0 komentar:

Post a Comment

Berkomentarlah yang bijak, iklan/spam langsung dihapus

Related Posts Plugin for WordPress, Blogger...