Motivation - "Cool Loading Efek" - "Efek Loading Blog Keren with CSS3". Widget yang satu ini merupakan efek yang akan muncul pada saat sedang mengklik link yang aktif "tanpa atribusi target="_blank". Memasang Efek ini bisa dikatakan akan membuat blog anda menjadi lebih menarik dan efisien.
Bagaimana Efek / Cara Kerja yang akan tampil setelah memasang Efek Loading ini? Setelah memasang Efek Loading ini, pada saat kita membuka blog/web kita, maka seolah-olah web kita akan tampil dengan efek scrolling to up, artinya blog seolah olah akan muncul dari bawah dan berhenti pada posisinya.
Bagaimana Cara Pemasangannya? Silahkan Ikuti Tutorial dibawah ini :
- Login ke Blogger >> Dashboard >> Template >> Edit HTML
- Cari Kode ]]></b:skin> dengan menggunakan CTRL + F agar lebih mudah dalam pencarian
- Masukkan atau Pastekan Kode dibawah ini, tepat diatas kode ]]></b:skin>
<style type='text/css'>
/* efek animasi halaman transform start */
@-webkit-keyframes transform-translate{
from{-webkit-transform:translate(0px,1000px)}
to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes transform-translate{
from{-moz-transform:translate(0px,1000px)}
to{-moz-transform:translate(0px,0px)}
}
@-ms-keyframes transform-translate{
from{-ms-transform:translate(0px,1000px)}
to{-ms-transform:translate(0px,0px)}
}
@-o-keyframes transform-translate{
from{-o-transform:translate(0px,1000px)}
to{-o-transform:translate(0px,0px)}
}
@keyframes transform-translate{
from{transform:translate(0px,1000px)}
to{transform:translate(0px,0px)}
}
/* efek animasi halaman transform end */
/* implementasi pada element */
body {
-webkit-animation:transform-translate 5s;
-moz-animation:transform-translate 5s;
-ms-animation:transform-translate 5s;
-o-animation:transform-translate 5s;
animation:transform-translate 5s;
}
</style>
- Save
Jika terjadi Masalah, atau kerusakan pada efek ini, segera beritahu kami. Itulah Tutorial "Efek Loading Blog Keren with CSS3" Semoga Bermanfaat. Terima Kasih.
