Memberi Efek Samar Pada Gambar

Pada artikel kali ini saya akan menjelaskan cara membuat efek samar / blur pada gambar, foto ataupun banner yang ada di blog kita. Efek samar 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. Biar anda tidak penasaran silahkan ikuti saja langkah-langkah berikut ini.

A. Langkah Pertama

1. Masuk ke Dasbor
2. Klik Tab Tata Letak
3. Klik Tab Edit HTML
4. Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode ]]></b:skin>
6. Persis sebelum kode tersebut, pastekan scirpt di bawah ini

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

7. Klik Simpan Template

B. Langkah Kedua

Sekarang kita akan menciptakan gambar dengan efek blur, silahkan perhatikan script-script berikut di bawah ini, dengan demikian anda hanya perlu merubah script gambar anda yang telah anda pasang sebelumnya di blog anda atau anda juga bisa membuat script baru sesuai dengan selera anda.

Script ini merupakan script standar tanpa efek blur

<a href="http://www.bertuah.org"><img border="0" src="http://img21.imageshack.us/img21/4870/pinginbelajar.jpg"></a>

Maka hasilnya akan seperti di bawah ini

Keterangan untuk hasil gambar di atas :

1. Apabila cursor melintas tidak terjadi efek blur
2. Apabila diklik akan langsung masuk ke URL yang dituju


Sekarang kita akan mengubah gambar di atas dengan memberi efek blur, caranya hanya cukup dengan menambah script class="linkopacity" pada script URL yang dituju, maka scriptnya akan menjadi seperti ini

<a href="http://www.bertuah.org" class="linkopacity"><img border="0" src="http://img21.imageshack.us/img21/4870/pinginbelajar.jpg"></a>

Maka hasilnya akan seperti di bawah ini

Keterangan untuk hasil gambar di atas :

1. Apabila cursor melintas akan memberikan efek blur
2. Apabila diklik akan langsung masuk ke URL yang dituju


Jika anda tidak ingin gambar tersebut disertakan dengan link, maka kita akan mengganti URL yang dituju dengan script "#nogo", maka scriptnya akan menjadi seperti ini

<a href="#nogo" class="linkopacity"><img border="0" src="http://img21.imageshack.us/img21/4870/pinginbelajar.jpg"></a>

Maka hasilnya akan seperti di bawah ini

Keterangan untuk hasil gambar di atas :

1. Apabila cursor melintas akan memberikan efek blur
2. Apabila diklik tidak akan masuk ke URL yang dituju


Yang perlu anda edit pada script -script di atas adalah :

1. Silahkan ganti script http://www.bertuah.org dengan URL yang ingin anda tuju
2. Silahkan ganti script http://img21.imageshack.us/img21/4870/pinginbelajar.jpg dengan URL gambar yang ingin anda beri efek blur
3. Selesai

Selamat mencoba, semoga bermanfaat