Untuk menambah kejelasan isi artikel di blog tidak jarang kita menyisipkan satu atau beberapa gambar di sela-sela isi artkel. Anda dapat membuat tampilan gambar menjadi lebih menarik dengan memberi efek buram(blur) pada gambar Anda. Dalam tips blogger kali ini kita akan membahas cara membuat efek buram(blur) pada gambar di artikel/posting blog.
Ada dua tipe tampilan yang bisa Anda pilih untuk menampilkan gambar dengan efek buram(blur). Tipe pertama adalah menampilkan gambar dengan tampilan buram terlebih dahulu kemudian menampilkan tampilan gambar sesungguhnya ketika kursor menyentuh gambar (Gambar 1). Tipe kedua adalah menampilkan tampilkan gambar sesungguhnya terlebih dahulu kemudian menampilkan tampilan gambar buram ketika kursor menyentuh gambar (Gambar 2).



Berikut cara untuk membuat efek buram pada gambar artikel/posting blog :

1. Seperti biasa Log In dahulu ke akun Blogger Anda
2. Pada dashboard, pilih Edit Layout–> Edit HTML.

Sebelum melakukan edit template, sebaiknya simpan dulu template blog Anda mengklik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan Anda sudah memiliki back-up untuk mengembalikannya seperti semula.

3. Pada menu Edit HTML carai kode ]]> , lebih mudah apabila Anda menggunakan CTRL+F.

4. Letakkan kode dibawah ini tepat di atas kode ]]>

.blur-before {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.blur-before:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}
.blur-after:hover {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}

5. Setelah selesai kemudian klik “Simpan Template”

Selanjutnya setiapAnda ingin menampilkan gambar dengan efek buram pada artikel yang Anda buat, pada opsi penulisan artikel Edit HTML tambahkan atribut kode <a href="#go" class="linkopacity"> untuk hasil seperti Gambar 1 di atas dan atribut kode <a href="#nogo" class="linkopacity"> untuk hasil seperti Gambar 2 di atas. sebagai contoh lihat kode di bawah ini untuk setiap masing-masing gambar di atas.

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#go" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSUcOoiH8i-JqUlJyK7YiVogn2XhB639z07GHLy4VZR-Ou6rvc1sRjh4VlFCLDTAUpPcBnm_j9j4OlGJmIbfMVJh_HlBcuLng-ZiUWktOLT9vwMQYaBZ_ksvTE2YqOjAALh4jgSvPWg/" />

<a href="http://www.blogger.com/post-edit.g?blogID=319948605987470972&amp;postID=5166849818383405645#nogo" class="linkopacity"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjSUcOoiH8i-JqUlJyK7YiVogn2XhB639z07GHLy4VZR-Ou6rvc1sRjh4VlFCLDTAUpPcBnm_j9j4OlGJmIbfMVJh_HlBcuLng-ZiUWktOLT9vwMQYaBZ_ksvTE2YqOjAALh4jgSvPWg/" />

Dari : Supardipunya