Saturday, 13 October 2012

Tutorial Efek Image Opacity Pada Artikel Blog

Pada Blog tanpa harus mengubah isi template tapi hanya pada Image di artikel. Misalnya saja pada gambar berikut :


Rekan -rekan hanya perlu menambahkan kode dibawah ini pada file image location dan jangan lupa khusus untuk kode tersebut disimpan di edit HTML posting bukan di bagian Compose. Kodenya-nya sbb :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh30g4YQizPmVD9mBUvYkBYbJfdy3oU82y0ObU8xTAdQzfzQzVABVVLuV8b_FRqfUeQei5pbqtZiVXzplWud0rac7M6O7hJNuqs2uZgsFga7MgARPA2rYABsVGuGeLcAHLaPVReDzpbalkN/s1600/COVER-MANGA-CANTIK.jpg " style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />


Gantilah Url image berwarna biru diatas dengan Url image sobat. Cara ini lebih praktis bukan? gambar yang ditampilkan akan tampil lebih menarik untuk dipandang.  Sedangkan pada cara pertama harus selalu memasang kode class “opacity” dan menambah HTML template. Inilah Salah satu Efek CSS yang banyak diminati blogger.
Semoga tutorial singkat ini bisa bermanfaat bagi rekan-rekan blogger yang membutuhkannya.

0 comments:

Post a Comment

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes