Sumber http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/
Preloader kali ini berfungsi untuk memunculkan animasi sementara blog sedang di load. Elemen lain akan disembunyikan selama proses loading dan akan dimunculkan dengan efek fade dengan mulus.
Tertarik?
Proses Instalasi, komentar bila anda gagal
Plugin JQuery
- Buka Template > Edit HTML
- Klik salah 1 kode, pencet CTRL + F
- Cari </body>
- Diatas kode tersebut tambahkan kode
<!-- jQuery Plugin -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<!-- Preloader -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>
CSS / Skin
- Cari ]]></b:skin>
- Diatas kode tersebut tambahkan kode
/* Preloader */
#preloader {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px; /* lebar gambar, kalau yang dibawah nya tinggi gambar */
height:200px;
position:fixed;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(http://sierrafire.cr.usgs.gov/images/loading.gif); /* alamat gambar */
background-repeat:no-repeat;
background-position:center;
background-size: 200px;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
HTML
- Cari kode <body>
- Dibawah kode tersebut tambahkan kode berikut
<!-- Preloader -->
<div id='preloader'>
<div id='status'/>
</div>
makasih buat infonya
BalasHapus