Cara Memasang Flat Preloader di Blog

Cara Memasang Flat Preloader di Blog

Snippet

Namina Kiky

6/22/2017

Cara Memasang Flat Preloader di Blog - Kali ini saya ingin berbagi Flat Preloader, apa gunanya? banyak tentunya, salah satunya file yang berformat gif atau gambar gerak ini bisa kita jadikan sebagai efek loading saat memuat blog agar memberikan jeda waktu dan daya tarik tersendiri bagi pengunjung.

Bagaimana cara memasang efek loading blogger ini? Untuk tutorial Cara Memasang Efek Animasi Page Loading di Blog bisa Anda terapkan dengan mudah, silakan ikuti langkah di bawah ini:

Pastikan sudah login ke Blogger, sekarang masuk ke dashboard blog sobat klik template dan pilih edit HTML, kemudian cari kode </body>, jika sudah ketemu, salin kode di bawah ini di atasnya.

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Perhatikan kode yang ditandai, bisa Anda ganti dengan url gambar lain. Silakan Anda cari referensi untuk gambar preloader lainnya di tempat lain. Berikut beberapa file loading efek yang sudah saya tambahkan dalam file rar, bisa download di sini dengan dimensi 128x128 pixel:

• DEMO

Namina Kiky