Cara Membuat Efek Blur Pada Gambar di Blog
Blur diartikan samar. Membuat Efek Blur Pada Gambar di Blog ini tidaklah sulit, efek blur terjadi dengan sedikit bantuan kode CSS. Efek blur pada akan terlihat jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar.
Untuk memasang efek blur diblog, yang harus anda lakukan yaitu :
1. Login Keakun Blogger
2. Pilih Template => klik Edit HTML
3. Kemudian anda cari kode ]]></b:skin>
4. Selanjutnya anda copy kode dibawah ini dan pastekan diatasnya :
Keterangan :
Selanjutnya penggambungan URL link dan URL gambra :
Jadi akan terlihat seperti berikut
Gambar Normal
Untuk membuat efek diperlukan kode pemanggil, untuk kode pemanggil dengan menambahkan kode class="linkopacity" hasilnya akan terlihat seperi berikut :
Gambar dengan efek blur
Untuk memasang efek blur diblog, yang harus anda lakukan yaitu :
1. Login Keakun Blogger
2. Pilih Template => klik Edit HTML
3. Kemudian anda cari kode ]]></b:skin>
4. Selanjutnya anda copy kode dibawah ini dan pastekan diatasnya :
.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=40); -moz-opacity:0.3; opacity:0.3;border:0;}
Keterangan :
- opacity=40 adalah pengaturan tingkat blur
- Pada angka 40 jika dibuat rendah kan tingkat blur akan semakin tinggi
5. Simpan Template
Untuk membuat efek blur pada gambar, terlebih dahulu anda menyiapakan URL link dan URL gambar, berikut ini URL link danURL gambar :
URL link : http://aak-share.blogspot.com/2014/10/membuat-daftar-isi-otomatis-di-blog.html
URL Gambar : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkVDQtQmYswQKwL9KbQyn1q9gffdHf919apQ9YWtmRKIl1y4SZsmwlQ7RJxd6S_iGKBl0_OjdBECZ5hV_LiEAKKFQzxs7ce0D82HKJnV1X5enrAt5JRs8wycd4bix93TAK2nJhi1hQVo/s1600/my+chemical+romance.png
Selanjutnya penggambungan URL link dan URL gambra :
<a href=" URL link "><img border="0" src=" URL gambar "></a>
Jadi akan terlihat seperti berikut
<a href=" http://aak-share.blogspot.com/2014/10/membuat-daftar-isi-otomatis-di-blog.html "><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkVDQtQmYswQKwL9KbQyn1q9gffdHf919apQ9YWtmRKIl1y4SZsmwlQ7RJxd6S_iGKBl0_OjdBECZ5hV_LiEAKKFQzxs7ce0D82HKJnV1X5enrAt5JRs8wycd4bix93TAK2nJhi1hQVo/s1600/my+chemical+romance.png "></a>
Gambar Normal
Untuk membuat efek diperlukan kode pemanggil, untuk kode pemanggil dengan menambahkan kode class="linkopacity" hasilnya akan terlihat seperi berikut :
<a href=" http://aak-share.blogspot.com/2014/10/membuat-daftar-isi-otomatis-di-blog.html " class="linkopacity"><img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkVDQtQmYswQKwL9KbQyn1q9gffdHf919apQ9YWtmRKIl1y4SZsmwlQ7RJxd6S_iGKBl0_OjdBECZ5hV_LiEAKKFQzxs7ce0D82HKJnV1X5enrAt5JRs8wycd4bix93TAK2nJhi1hQVo/s1600/my+chemical+romance.png "></a>
Gambar dengan efek blur