Yang akan saya bahas kali ini masih mengenai design blog, Yaitu bagaimana cara memberikan efek load/muat pada blog, Saya sudah pernah mem-postingan tentang loader pada blogspot dengan
Css3,
Javascript, Dan
jQuery namun loader blog yang satu ini menggunakan
@KeyFrame.
@KeyFrame hanya dapat support dengan web browser tertentu, seperti
Firefox,
Opera,
Google Chrome, dll.
Untuk
"demo-nya" anda bisa melihat-nya di blog ini. Karena loader ini juga saya terapkan di blog ini.
Cara membuat-nya sangat mudah dan simple cukup tambahan kode css3 dibawah ini diatas kode
]]></b:skin>.
@-webkit-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-moz-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-ms-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@-o-keyframes myfirst {0%{opacity:0}100%{opacity:1}}
@keyframes myfirst {0%{opacity:0}100%{opacity:1}}
Dan tambahkan kode ini pada instrumen yang akan diberi efek loader.
animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;
Contoh : #header-wrapper {
animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;background:#fff}
Catatan : #header-wrapper adalah nama instrumen.