;

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

Diposkan Oleh : Zainoel Arifin

Seluruh artikel pada Blog ini dapat dicopas, dimodifikasi, diperbanyak, dicetak, disebarkan secara bebas dan boleh tidak menyebutkan sumber asal dari artikel yang ingin Anda tampilkan dari blog ini bila Anda merasa terganggu. Kecuali artikel dari sumber lain yang di share pada blog ini harus disertakan link sumber aslinya.


0 komentar:

Post a Comment

Related Posts Plugin for WordPress, Blogger...