memberi efek blur pada gambar

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

kumpulan blog tutorials

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

kumpulan blog tutorials


Selamat mencoba, semoga bermanfaat...

( Sumber : http://pinginbelajar.blogspot.com )


13 komentar:

  1. PERTAMAX..
    good article sob..

    BalasHapus
  2. sob...tuker follow sekalian yaaa...trims infonya

    BalasHapus
  3. @Miracle : Okey...aku follow kamu sobat...

    BalasHapus
  4. makasih tips nya bro...
    saia udah follow, please follow balik yaa :c:

    BalasHapus
  5. @arunaspot : sama-sama sobat. Okey, Q follow balik ya...

    BalasHapus
  6. thanks brow tipsnya bagus...

    BalasHapus
  7. kunjungan sore mas...

    numpang baca2 nih............
    bagus banget blognya

    BalasHapus
  8. ka.. piet udah coba.. tp ko belum berhasil yaa :i:

    BalasHapus
  9. thans tas tips na...............bgus...........

    BalasHapus
  10. Terima kasih ya...infonya, bermanfaat sekali...:c:

    BalasHapus
  11. Oke oke,,, satu lagi tips menarik,,,

    BalasHapus

Mau tukeran link? silakan buka Link Sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.