Cara Membuat Efek Blur

Apakah Anda menyukai Artikel ini?

Tweet Share

Apakah Anda ingin berbagi Artikel ini?

Cara Membuat Efek Blur

OK kawan... langsung aja yach... saya hari ini cukup capek mau berangkat kuliah juga... Jika kawan ingin efeck blur seperti bognya kawan SingStright ini... kawan lihat di kotak Banner pojok kanan atas , kalau terkena mouse dia akan terang dan jelas kawan... jika ingin seperti itu kawan bisa ikuti sedikit tutorial di bawah ini...

Langkah Pertama :

1. Kawan login ke blogger.
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 kawan : cara cepat tekan CTRL+F  ]]></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. Selesai kawan.

Langkah kedua :


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://singgih.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://singstright.blospot.com" class="linkopacity"><img src="http://singgih.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti di kotak Banner diatas, silahkan arahkan mouse anda dan di klik saja jika mau.

Jika gambar kawan 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://singgih.googlepages.com/Water-06.jpg"></a>

Maka hasilnya akan seperti biasa kawan.

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


Happy Blogging....!!!! Selamat Mencoba Kawan..!!!

Baca Artikel Terkait :

Related Posts with thumbnails and summary post for blogger

• Judul Artikel : Cara Membuat Efek Blur
• Artikel ini diterbitkan oleh : Sing Stright
• Diterbitkan pada :
• Dalam kategori : Blogging, Tutorial
• Jumlah komentar : 1 komentar