Cara Membuat Efek Photo Samar (blur)

Duh tak terasa ya sudah dua minggu ya saya tidak ngeblog, tapi tenang saja saya masih ada di sini bersama blog ini, hihihi... so jadi artis saja ya,  absen ngeblog pake acara pengumumam segala rupa.  Walaupun sedikit agak kaku untuk membuat tulisan, tapi biar di paksain saja deh soalnya kalau tidak ngeblog saku juga jadi kempes nih, hehehe.

Banyak sekali yang bertanya, dan yang paling dominan di tanyakan oleh banyak orang yaitu bagaimana cara mengembalikan kotak komentar dari haloscan ke kotak komentar blogger? duh gimana ya, agak sedikit ribet memang, walaupun begitu saya pernah di minta bantuan oleh seorang teman melalui chatting untuk mengerjakan hal yang tadi dan hasilnya sukses. Akan tetapi saya lupa untuk mencatat apa saja yang saya ganti, jadi untuk yang punya masalah seperti ini di tunggu saja ya soalnya saya harus melihat lagi kode apa yang harus di ganti.

Beralih ke pertanyaan lain yaitu bagaimana cara membuat efek photo samar (blur) pada blog/web? wah sepertinya ini tidak terlalu sulit untuk di terangkan, soalnya masih sedikit kaku nih jadi mending yang gampang-gampang saja dulu. Setelah melihat contoh yang di berikan oleh sahabat yang betanya, ternyata memang menarik juga untuk di pasang. Efek photo yang di maksud adalah photo (gambar) akan terlihat samar ketika pertama kali dilihat, namun apabila photo atau gambar tersebut di sorot oleh mouse komputer anda maka photo atau gambar tersebut menjadi terlihat jelas, bingung? sok di sorot dahulu photo di bawah ini agar jelas apa yang sedang saya bicarakan :

 

 

 

 

Tertarik juga untuk membuat efek yang seperti di atas, begini nih caranya :

 

Langkah #1

 

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata letak.
3. Klik tab Edit HTML.
4. Klik pada tulisan Download Template Lengkap di bagian sebelah atas monitor. Silahkan di Backup dulu templatenya (sangat penting).
5. Silahkan cari kode berikut : ]]></b:skin>
6. Copy paste kode berikut di atas kode ]]></b:skin>

    

   .linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
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;
}

     

7. Klik tombol Simpan Template.
8. Langkah #1 selesai.

 

 

Langkah #2

 

Setiap anda memasang photo atau gambar, sisipkan kode seperti ini :

 

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

 

Misalkan kang rohman mempunyai alamat gambar seperti ini :

http://24rohman.googlepages.com/Water-06.jpg

Semisal gambar ini ingin nge link ke http://www.blogspottutorial.com, maka kode yang di pasang adalah seperti di bawah ini :

<a href="http://www.blogspottutorial.com" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik saja jika mau :





Jika gambar anda tidak ingin nge link ke mana-mana, maka cukup gantikan saja alamat url tujuan dengan dengan kode #nogo, contoh :

<a href="#nogo" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti ini, silahkan arahkan mouse anda dan di klik dan pasti tidak akan terjadi apa-apa :

Sudah paham? pastinya sudah, soalnya tentang cara nampilin gambar pernah saya tulis panjang lebar pada postingan tentang Google page creator, di baca lagi jika masih belum paham betul.


Sedikit clue tentang kode CSS yang di atas, anda bisa mengubah tingkat pengkaburan gambar (blur) dengan cara menambah atau mengurangi nilai opacity, contoh :

 

.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}


Jika nilai opacity=30 di kurangi, misal menjadi opacity=10, maka gambar akan terlihat lebih samar, contoh :

 

.linkopacity img {
filter:alpha(opacity=10);
-moz-opacity: 0.10;
opacity: 0.10;
border:0;
}


Silahkan bereksperimen sendiri untuk mendapatkan hasil yang lebih baik. Sampai jumpa pada posting berikutnya. Don't miss it dude.