Template dan Tips Seputar Blogger

Thursday, June 22, 2017

Cara Memasang Flat Preloader di Blog

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.

Cara Memasang Flat Preloader di Blog

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:

Cara Memasang Flat Preloader di Blog

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('http://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:

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×