Fade In itu semacam animasi lambat seperti dari putih menjadi jelas. Kalau dalam bahasa Inggris nya, Fade In itu dari opacity 0 ke opacity 1, dari tidak terlihat/buram menjadi jelas. Anda dapat membuat dan memasang efek fade in ini di blog, sehingga setiap kali anda membuka halaman baru, maka akan ada efek fade in.
Untuk demo nya tidak usah jauh-jauh, cukup lihat blog ini saja...
Efek ini pure CSS, alias tidak memakai apapun selain CSS. Jadi, memasang fade in di dalam blog sama sekali tidak memengaruhi loading blog anda.
Bagi anda yang ingin membuatnya, langsung saja ikuti tutorial dibawah ini.
Membuat Efek Fade In Saat Membuka Halaman di Blog Dengan CSS
Pertama, silakan anda buka blogger.com, masuk ke Template, Edit HTML, dan cari kode berikut ini:
<head>
Bila tidak ada, ini kode penggantinya:
<head>
Bila sudah ketemu, silakan masukkan kode CSS berikut tepat dibawah kode yang sudah anda cari tadi:
<style>
.fade, body {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;}
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}}
</style>
Simpan template anda dan lihat hasilnya. Anda juga dapat menerapkan efek ini pada elemen lainnya, misal iframe, div, a, img, dan lain-lain, hanya dengan menambahkan kodenya menjadi seperti ini:
<style>
.fade, body, img {
-webkit-animation-name: fade;
-webkit-animation-duration: 3s;
animation-name: fade;
animation-duration: 3s;}
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}}
</style>
Seperti contoh diatas saya menambahkan elemen img. Itu berarti, setiap gambar yang baru muncul di blog anda akan memiliki efek fade in, jadi keren gitu...