Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi
pada blog ini merupakan suatu efek page loading yang terbaru namun
sangat sederhana sekali, tetapi animasi page loading di blog ini sangat
keren sekali dengan efek-efek animasi loading yang begitu menarik dan
banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan
ajax loading page untuk blog, dan saya juga akan membagikan beberapa
efekanimasi loading page yang saya ambil dari salah satu web penyedia
ajax animasi page loading.
Untuk
membuat efek animasi page loading di blog kita hanya menggunakan sebuah
CSS dan
jQuery
agar bisa menjadi sebuah efek animasi page loading di blog. Dengan
menggunakan efek animasi page loading ini tidak akan terlalu memberatkan
Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan
efek animasi page loading pada blog Anda.
Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan
efek animasi loading page di blog terbaru silahkan baca tutorialnya
dibawah ini :
1. Masuk ke
Blogger.com
2. Klik
Template =>
Edit HTML
3. Cari kode
]]</b:skin> atau
</style>
4.
Copy kode css dibawah ini, lalu
Paste diatas kode
]]</b:skin> atau
</style>
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJY4KBluVx23gSGKe1agytA-J11tgqJwgi-RCmNkiiIvuR2gQ6XhKsRtC4_XQQbr90BgG47SV9OGe9HibqjPxmlNq3waJ9dpTReIOQdPy69_e_wxjK48GGEigsqGQaIXQ9Ioc0Jt_vyivA/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}
5. Cari kode
</body>
6.
Copy kode jQuery dibawah ini, lalu
Paste diatas kode
</body>
<script type='text/javascript'>
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
</script>
7. Klik
Simpan Template
Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini
http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.
Kumpulan Efek Animasi Loading Page .Gif
Inilah beberapa efek ajax animasi loading page yang saya ambil dari
salah satu web penyedia ajax loading page, silahkan bisa Anda pilih
dibawah ini :
https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.GIF
https://lh4.googleusercontent.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.GIF
https://lh3.googleusercontent.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.GIF
https://lh5.googleusercontent.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.GIF
https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF
https://lh5.googleusercontent.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.GIF
https://lh3.googleusercontent.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.GIF
https://lh5.googleusercontent.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.GIF
https://lh5.googleusercontent.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF
https://lh4.googleusercontent.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.GIF
Semoga Bermanfaat...
Read More --►
