Membuat Efek BLUR pada Gambar Sabtu, 04 Februari 2012 amirul rozie

Cara membuat efek Blur / Buram pada gambar setelah kemarin memposting tentang membuat efek ZOOM pada gambar pada kesempatan kali ini blog tutorial blogtegal akan mengulas kembali tentang membuat efek blur gambar yang mana cara ini hanya untuk mempecantik tampilan blog,yang mana cara kerjanya yakni apabila pointer mouse melintas diatas gambar maka akan menjadi jelas seperti gambar aslinya.
Langsung saja tutorialnya

• login ke dashbord blogspot kamu
  
• pilih Rancangan »» Edit HTML
  
• Tempatkan kode CSS berikut diatas kode ]]></b:skin>
  
• kode CSS-nya
  

  .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;}

• terakhir klik SIMPAN

Cara penulisan kode gambarnya seperti berikut <img src="http://alamat-gambar-kamu.jpg" class="linkopacity"/> Perhatikan pada kode CSS yang berada diatas pada tulisan yang berwarna hijau 30, disini kamu bisa merubah tingkat ke-buraman-nya yakni semakin kecil nilai diatas maka akan semakin buram gambarnya

Bagi kamu yang ingin tahu tentang cara membuat gambar menjadi SEO FRIENDLY baca artikel blogtegal tentang merubah gambar menjadi lebih