Membuat Efek Fading Pada Gambar di Blog

Efek fading seringkali kita dengar saat kita membuat animasi dokumen di power point. Efek ini akan memberikan efek buram atau kabur pada gambar sehingga gambar akan terlihat unik. Efek fading ini tidak terlalu jauh berbeda dengan yang ada pada power point. Saat anda membuat efek fading pada gambar di blog, dalam keadaan biasa, gambar akan terlihat buram, namun saat anda mengarahkan mouse anda ke atas gambar, gambar akan terlihat jelas kembali. Tertarik untuk membuat efek fading pada gambar di blog? Silahkan anda simak caranya berikut ini.

Membuat Efek Fading Pada Gambar di Blog

Sebelum anda mengubah atau menambah kode script ke dalam halaman HTML Template anda, sebaiknya anda mem-backup template terlebih dahulu. 

Membuat Efek Fade In Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin> 

/*---THE KAMPOENG BLOGGER FADE IN CODE---*/
.Fadein img {
filter:alpha(opacity=20);
opacity: 1.0;
border:0;
}
.Fadein:hover img { 
filter:alpha(opacity=100);
opacity: 0.2;
border:0;
}

Step 3

Tambahkan kode class="Fadein" ke dalam kode gambar anda (untuk menambahkan kode pada gambar masuk ke halaman HTML yang ada disamping compose)

<a class="Fadein" href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="URL GAMBAR" width="194" /></a> 

Untuk melihat hasilnya silahkan anda lihat disini 

Lihat Demo

Membuat Efek Fade Out Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2 

Letakkan kode berikut di atas kode ]]></b:skin>

/*---THE KAMPOENG BLOGGER FADE OUT CODE---*/
.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.2;
border:0;
}
.Fadeout:hover img { 
filter:alpha(opacity=20);
opacity: 1.0;
border:0;
}

Step 3

Tambahkan kode class="Fadeout" ke dalam kode gambar anda (untuk menambahkan kode pada gambar masuk ke halaman HTML yang ada disamping compose)

<a class="Fadeout" href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="URL GAMBAR" width="194" /></a> 

Untuk melihat hasilnya silahkan anda lihat disini

Lihat Demo

Bila anda tertarik untuk membuat gambar di artikel anda ada yang memiliki efek fade in dan gambar lain memiliki efek fade out maka anda hanya perlu meletakkan dan menggabungkan kedua kode script di atas dan meletakkannya tepat di atas kode ]]></b:skin>, lalu pada kode gambar letakkan kode class="Fadein" atau class="Fadeout" pada gambar yang anda inginkan. 

Bagaimana? Anda tertarik untuk memasangnya?
Selamat mencoba.
Wassalam.

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 11:54 PM

Posted in: Body , Efek , Gambar