efek loading blog dengan animasi keyfames

A. Animation 1 (Bounce and Rotate efek) :
Anda bisa lihat contohnya di sini  : "http://skynet-fordeon.blogspot.com/"
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :

@-webkit-keyframes WAKloading{
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s

4.Sehingga nantinya jadi seperti ini :

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}

5. Save Template!


sumber

Artikel Terkait:

tutorial blogger

• cari template klik disini
• Apa Itu SEO?
• Apa Itu JavaScript
• Kelebihan Dan Kekurangan Blogspot dan Wordpress
• Cara Memberi Password Pada Winrar
• APAKAH BLOGGER ITU PAHLAWAN?
• Cara Memasang Tukeran Link Otomatis Dengan Mistery Linky's Magic Wizard
• 9 Cara Membuat Loading Blog 300% Lebih Cepat
• Cara Memasang Tombol Back to Top diatas Footer pada Blog
• Cara Scan Blog dan Website dari Virus dan Malware
• EFEK SHADOW PADA TEXT DENGAN CSS
• Loading Blog dengan Keyframes dari Bawah ke Atas
• menu blog dengan CSS
• CARA MENGUBAH "JOIN THIS SITE" DENGAN GAMBAR FOLLOWERS 999999999
• cara membuat menu berbentuk lingkaran
• Membuat Efek Sliding
• cara membuat tooltip di blog
• cara membuat read more dan add coment
• cara membuat menu navigasi
• cara membuat gambar poting berputar saat di sorsot mouse
• Pentingnya & Manfaat bahasa inggris bagi seorang blogger
• Pengertian Tentang Komentar Kentut Pada Blog
• Cara Membuat Kotak Judul Postingan Jadi Menarik
• Cara Memasang Embed Link di bawah Postingan Blog