Cara Membuat Efek Blur Pada Gambar Blog

Sesuai dengan nama judul postingan yaitu cara membuat efek blur (samar) pada gambar/foto, yang jelas gambar tersebut sepintas akan terlihat samar/kabur dan akan terlihat lebih jelas atau terang setelah disorot oleh mouse. Pasti anda penasaran ingin melihat hasilnya dan tertarik ingin memasangnya juga. Ok langsung saja ke pembahasan membuat efek gambar samar/blur.

Cara Membuat Efek Blur (Samar) Pada Gambar
1. Login ke blogger
2. Klik Tata Letak
3. Klik Edit HTML.
4. Backup dulu template anda untuk jaga-jaga kalau salah
5. Centang Expand Template Widget
6. Gunakan ctrl+F untuk mencari kode ]]></b:skin>
7. Letakkan kode berikut di atas kode ]]></b:skin>


.linkopacity img {
filter:alpha(opacity=
20);
-moz-opacity:
0,20;
opacity:
0.20; .20;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}

8. Simpan Template

Keterangan :
Semakin rendah nilai opacity pada teks warna merah diatas, maka akan semakin samar/kabur tampilan gambar tersebut.

Untuk membuktikan efek dari kode diatas bekerja apa tidak, silahkan anda buat satu postingan dan sisipkan kode seperti ini pada postingan yang bergambar. Kode dibawah ini berlaku untuk selamanya pada setiap postingan yang anda pasang gambar (gambar samar/blur menjadi terang)

<a href="url tujuan" class="linkopacity"><img src="url sumber gambar"></a>

Jika scrip diatas tidak berhasil,silahkan pakai scrip yang dibawah ini:

<img src="url gambar" style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/>

Untuk melihat hasilnya akan saya cantumkan contohnya, dan mulailah mouse anda sorot ke gambar dibawah ini, yuk mulai :



Bagaimana menurut anda, sudah paham bukan? Maksud saya paham dengan gambar diatas, hehehe, ya udah selamat mencoba Cara Membuat Efek Blur Pada Gambar, semoga bermanfaat.

Related Posts:

  • Cara Mudah Parse Kode Iklan Dan HTMLDalam dunia Blogger kita sering baca istilah Parse, Encode atau Decode terutama jika berhubungan dengan kode HTML (Hyper Text Mark up Language) yang ingin ditampilkan pada artikel atau mengeksekusi kode Iklan agar bisa tampi… Read More
  • Kumpulan Animasi Bergerak dipojok Blog Hai sobat blogger semua,kali ini saya akan berbagi sama kalian gimana cara membuat animasi bergerak dipojok blog,dibawah ini adalah scripnya,anda tinggal kopi ajah,semuanya uda siap pakai,oh ya lansung aja kita kupas: … Read More
  • Cara Membuat Iklan Melayang dengan 2 Kali Klik Close Selamat malam sobat blogger,kali ini saya akan mencoba berbagi gimana cara membuat iklan melayang dengan 2x klik close,blog akan kebanjiran klik iklan. Karena untuk melihat artikel utama di dalam blog harus menutup atau men… Read More
  • Trik Memasang Banner Iklan Di Header Blog Memonetize blog dimana banyak cara yang bisa di lakukan seperti kebanyakan blogger tentunya sudah paham trik-triknya seperti ikut Adsense,Affiliasi ,Ads banner untuk disewakan dan lain sebagainya ,berusaha tidak ada salahny… Read More
  • Membuat 3 Kolom di Bawah Header BlogspotApa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. W… Read More

0 komentar:

Catat Ulasan