Trik Efek Image Opacity pada Blog

Banyak cara untuk mendekorasi isi blog sobat menjadi lebih cantik. Cantik disini adalah memiliki nilai seni keindahan pada tampilan blog. Salah satunya adalah Trik Efek Image Opacity pada Blog. Sebenarnya ini adalah trik lama untuk memperindah tampilan image sobat. Efek image sebelum disorot agak blur dan menjadi jelas ketika di sorot mouse (mouse-over). Tertarik untuk mencobanya? Silahkan ikuti tutorial berikut ini.

Berhubung blog ini tidak memakai efek image Opacity rekan-rekan bisa berkunjung pada blog rekan Allien di bawah ini. Selanjutnya perhatikan gambar yang terdapat disana dan cobalah sorot dengan mouse sobat (mouse-over) pada image tersebut : Blogdangkal
Sudah? Menarik bukan? Hal ini disebabkan penggunaan efek Image Opacity. Efek ini akan mendorong pengunjung untuk selalu mouse-over pada image yang kita tayangkan. Oke cukup sekian demo image-nya, sekarang mari kita lanjutkan pada Tutorial cara membuat Opacity effect.

Silahkan ikuti langkah-langkah berikut :

1. Login ke Akun Blogger sobat

2. Masuk ke Dashboard  -  Design - Edit HTML

3. Selanjutnya cari kode </head>

4. Simpan script kode dibawah ini di atas / sebelum kode </head> :

<style type='text/css'>
     a.opacity img {
          filter:alpha(opacity=50);
        -moz-opacity: 0.5;
          opacity: 0.5;
        -khtml-opacity: 0.5;}
          a.opacity:hover img {
          filter:alpha(opacity=100);
       -moz-opacity: 1.0;
         opacity: 1.0;
       -khtml-opacity: 1.0; }
    </style> 

5. Simpan / Save

6. Selanjutnya saat akan memasang gambar tambahkan kode class="opacity" , Contoh:

    Edit kode Image sebelumnya dengan penambahan kode diatas, misalnya menjadi sbb :

    <a class="opacity" href=" http://3.bp.blogspot.com/-C-YwFW2mMN4/.......TEMPLE.jpg" imageanchor="1" style="margin-left: 1em;"><img border="0" src=" http://3.bp.blogspot.com/-C-YwFW2mMN4/.......TEMPLE.jpg" /></a> 

      

Sebelumnya ganti url gambar ('http://...jpg') diatas dengan gambar sobat sendiri tentunya.

UPDATE ARTIKEL - 27 Mei 2011:
Berdasarkan saran dari rekan Blogdangkal di kolom komentar maka admin menampilkan cara lain untuk efek image Opacity 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/AVvXsEjr3_dZ3rBwV-h2UYa0ZFSIcJW948-EyCSxu-j1YQhxLazIJQComAVC4zfNf1AxeI3shLcFUQqOyvt-jMgBv13rAv-dFHiDjRe-7OdvzTx3LHeDaflOcN3DeRzhnLTjl0JZxc2p06LdpIJC/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.