Mempercantik Load Blog Dengan @KeyFrame - Yang akan saya bahas kali ini masih mengenai design blog, Yaitu bagaimana cara memberikan efek load/muat pada blog, loader blog yang satu ini menggunakan @KeyFrame. @KeyFrame hanya dapat support dengan web browser tertentu, seperti Firefox, Opera, Google Chrome, dll.
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}}Dan tambahkan kode ini pada instrumen yang akan diberi efek loader.
@-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}}
animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;Contoh : #content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;background:#fff}
Catatan : #content-wrapper adalah nama instrumen.
keren juga templatenya gan,..
ReplyDeletemampir balik ya..
biasa aja :D
Deletemeluncuurrr
Iya template nya keren gan :)
ReplyDeleteagan juga keren templatenya :D
DeleteMantap bang tutorialnya.
ReplyDeletethaks :D
Deletewah ente ganteng juga ya gan kayak templatenya, tapi masi gantengan ane :D hehe
ReplyDelete#peace
wahh -_-
Deletewah :-b
Deletekeren banget mas! mantap ilmunya! :D
ReplyDeleteah biasa aja gan :)
Delete