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 :

.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/AVvXsEhahlThAwyw-jo-ZW11N0uGca0pbIqECs0wl0Z8fqSirZ8yTlnYTg3ttLIw_9UGrUscxm7d52y9BEqOdKxQJY7Yuun0qdgdLnlafMmZiv6sKKP9zRZymjWlDIDKD94D8MQnr_vvdGca02E/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/AVvXsEhahlThAwyw-jo-ZW11N0uGca0pbIqECs0wl0Z8fqSirZ8yTlnYTg3ttLIw_9UGrUscxm7d52y9BEqOdKxQJY7Yuun0qdgdLnlafMmZiv6sKKP9zRZymjWlDIDKD94D8MQnr_vvdGca02E/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/AVvXsEhahlThAwyw-jo-ZW11N0uGca0pbIqECs0wl0Z8fqSirZ8yTlnYTg3ttLIw_9UGrUscxm7d52y9BEqOdKxQJY7Yuun0qdgdLnlafMmZiv6sKKP9zRZymjWlDIDKD94D8MQnr_vvdGca02E/s1600/my+chemical+romance.png "></a>

Gambar dengan efek blur

Demikian Cara Membuat Efek Blur Pada Gambar di Blog

Bagikan Artikel ini