Kali ini saya akan memberitahu cara membuat efek page loading pada blog. Sebenarnya efek page loading ini bukan merupakan hal baru lagi bagi kita. Karena efek ini sudah di kenal sejak lama. Fungsi efek ini adalah untuk memperbagus / memperindah blog saat loading. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efek loading page yang saya ambil dari salah satu web penyedia ajax loading page.
Untuk membuat efek page loading pada blog kita hanya menggunakan CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek page loading ini tidak akan terlalu memberatkan loading blog anda, sehingga anda tidak perlu khawatir dengan penggunaan efek page loading pada blog anda.
Untuk itu blog pusat-tutorial.com akan membagikan tutorial Cara Membuat Efek Page Loading Pada Blog. Dengan memberikan efek loading ini, maka akan terlihat begitu indah dan keren ketika pengunjung blog anda sedang berpindah halaman maka efek animasi loading page ini akan terlihat. Baiklah tanpa perlu berbasa - basi lagi, langsung saja ikuti langkah langkah yang ada dibawah ini :.
- Masuk ke Blogger.com.
- Klik Template - Edit HTML.
- Cari kode ]]</b:skin> atau </style>
- 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/AVvXsEg0Q6Ej6ISWbovtpkcyBh6aFzSeqNF3yjPkbApYJfBCjIrQaJZklF2C6qWdqg3X1uuvDXKY6YixXMKW7EGNkB8PeHNgGoKhVrl9JunU2rOXapMHTNuRcwiMANVHxKabXMEpym4lg-PSQ2E5/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.
Kumpulan Efek Loading Page .gif.
Inilah beberapa efek ajax loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan pilih yang anda suka dibawah ini :.
Sekian artikel dan tips trick mengenai cara membuat efek page loading pada blog.
via http://www.andrepurnomo.tk/.
