Cara memberi efek blur pada gambar di blog

Tuesday, January 25, 2011

Pada postingan kali ini saya akan membahas bagaimana cara membuat Efek Blur pada gambar, foto ataupun banner yang ada di blog.
Efek Blur akan terjadi apabila cursor melintas pada objek tersebut.
Efek ini berlaku untuk semua objek gambar, baik itu gambar yang disertai dengan link ataupun gambar yang tidak disertai dengan link.
Cara memasangnya sebagai berikut :

Login ke Blogger
Klik Tata Letak
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
Tunggu beberapa saat ketika proses sedang berlangsung
Silahkan sobat cari kode ]]></b:skin>
Jika sudah ketemu letakkan code berikut diatasnya
===================================================================

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

===================================================================
Kemudian Simpan Template.

Berikut contoh penerapan :

Gambar biasa



Kode script
===================================================================

<a href="http://www.sazlina.co.cc/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9IU5lbEZZ7kU6qASI2x5lZeJXNPHH7xnwiBiBYYRRMQaE0a-stvFWu9ebOO56oOnXq4MmLJhNGourCe-zBfJWMksdbh7RZEniMIk7-oHA8YUNuYQTrgYAjiXMghJ76RJBU9rR3F_h1iA/s1600/logo_blogger.jpeg"></a>

===================================================================
Gambar dengan efek blur dengan link




Kode script
===================================================================

<a href="http://www.sazlina.co.cc/" class="linkopacity"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9IU5lbEZZ7kU6qASI2x5lZeJXNPHH7xnwiBiBYYRRMQaE0a-stvFWu9ebOO56oOnXq4MmLJhNGourCe-zBfJWMksdbh7RZEniMIk7-oHA8YUNuYQTrgYAjiXMghJ76RJBU9rR3F_h1iA/s1600/logo_blogger.jpeg"></a>

===================================================================

Gambar dengan efek blur tanpa link

Kode script
===================================================================

<a href="#nogo" class="linkopacity"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9IU5lbEZZ7kU6qASI2x5lZeJXNPHH7xnwiBiBYYRRMQaE0a-stvFWu9ebOO56oOnXq4MmLJhNGourCe-zBfJWMksdbh7RZEniMIk7-oHA8YUNuYQTrgYAjiXMghJ76RJBU9rR3F_h1iA/s1600/logo_blogger.jpeg"></a>

===================================================================
Selamat mencoba.

Popular Post

Labels: Tutorial Blog

Thanks for reading Cara memberi efek blur pada gambar di blog. Please share...!