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



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

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

Share this history on :

Tweet

CSS

• Cara Membuat Widget Label Dua Kolom
• Membuat Related Post dengan Efek Ceklis
• Blockquote dengan Efek Hover
• Membuat Breadcrumb Terindex Google
• Cara Membuat Buttons Keren dengan CSS
• Experiment with CSS3 - System Tatasurya
• Beberapa Efek Transisi Pada Gambar
• Load Page Blog Lebih Keren Dengan Keyframes
• Trik Mempercepat Loading Home Page Blog
• Cara Membuat Efek Rotate Miring Dengan CSS3
• Menyembunyikan Obyek Dengan Kode Overflow:hidden
• Pasang About Author Box dengan CSS
• Cara Memasang Facebook Like Otomatis di Posting
• @font-face CSS di Blogger Template
• Membuat Gambar Melayang di Blog
• Membuat Slide Headlines
• Membuat Menu Slide Show Tab View
• Comment Owner Berbeda dengan Pengunjung
• Mengubah Ukuran Template Blog
• Membuat Footer 3 Kolom dengan Background
• Membuat Link Berkedip Pada Saat Disorot Mouse
• Mengganti Tampilan Cursor (Mouse)
• Pasang Jam Animasi Colorfull With CSS & jQuery

Title : memberi efek blur pada gambar
URL : http://blogcunayz.blogspot.com/2011/06/memberi-efek-blur-pada-gambar.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link memberi efek blur pada gambar sebagai Sumbernya.