Memasang Dotted Animasi Preloading di Blogger - Setelah pada artikel sebelumnya saya juga pernah berbagi Animasi Preloading Page untuk blogger yaitu: Memasang Efek Loading Page Youtube di Blog dan Memasang Animasi Preloading di Blogger. Sebenarnya artikel ini fungsinya sama dengan dua artikel sebelumnya yaitu untuk animasi preloading page di blog, Hanya bedanya dari segi penampilannya saja.
Pada kesempatan kali ini, saya juga ingin membagikan Animasi Loading Page kembali untuk anda yang suka mengotak-atik tampilan blog anda, supaya menjadi lebih menarik lagi. Animasi kali ini memiliki tampilan 4 buah titik yang cukup besar (Dotted) yang memiliki warna-warni yang bergerak.
Untuk Demo, Silahkan klik disini. (Jika masih menggunakan).
Untuk anda yang ingin Memasang Dotted Animasi Preloading di Blogger, silahkan anda ikuti langkah-langkahnya dibawah ini:
- Masuk ke akun Blogger
- Pilih Template > Edit HTML
- Cari kode <body> dan paste kode berikut ini tepat dibawah kode <body> tsb.
<!-- LOADING BLOG PRELOADING -->
<div id='loader'>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
<div class='balls'/>
</div>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".balls").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 1000)
}, 1000)
});
</script>
<style>
#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#22475E;z-index:1000}.balls{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}.balls:nth-child(1){background-color:#FF5460;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(2){background-color:#FF9D84;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(3){background-color:#F0E797;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}.balls:nth-child(4){background-color:#75B08A;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
<!-- END PRELOADING -->
Setelah anda menambahkan kode diatas, sekarang anda dapat menyimpan template anda, dan anda sudah bisa melihat hasil Animasi Preloading Page diblog anda. Semoga blog anda menjadi lebih menarik dan lebih cantik.
Jangan lupa komentarnya! :)
Semoga bermanfaat..
Tidak ada komentar untuk *Memasang Dotted Animasi Preloading di Blogger!
Silahkan berkomentar sesuai topik artikel diatas dan jangan buang waktu anda hanya untuk membuat komentar SPAM disini.