Pada saat ini saya akan memberi tutorial tentang cara memberi efek blur pada gambar. Efek gambar blur adalah efek gambar akan terlihat samar-samar apabila mouse melewati gambar. 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
Script ini merupakan script standar tanpa efek blur
<a href="http://forantum.blogspot.com" target="_blank" title="kumpulan blog tutorials"><img alt="kumpulan blog tutorials" style="border: 0;" src="http://img36.imageshack.us/img36/6594/forantumbanner3.gif"/></a>
Maka hasilnya akan seperti di bawah ini
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://forantum.blogspot.com" target="_blank" title="kumpulan blog tutorials" class="linkopacity"><img alt="kumpulan blog tutorials" style="border: 0;" src="http://img36.imageshack.us/img36/6594/forantumbanner3.gif"/></a>
Maka hasilnya akan seperti di bawah ini
Selamat mencoba, semoga bermanfaat...
Tidak ada komentar:
Posting Komentar