Pada kesempatan kali ini saya akan memberikan tutorial bagaimana Cara Mudah Memasang Flat Preloader Pada Blogger. Mungkin banyak yang belum mengetahui apa itu Flat Preloader dan apa fungsinya. Oleh sebab itu sebelum menuju ke tutorial saya akan menjelaskan sedikit apa itu Flat Preloader dan apa fungsinya.
Flat Preloader adalah fitur yang berfungsi mengubah tampilan loading suatu blog menjadi menarik dengan tampilan animasi loading didalamnya. Flat Preloader bekerja menampilkan animasi loading pada saat pengunjung blog mencoba mengakses setiap halaman page situs, tujuannya agar tampilan halaman situs utama maupun postingan artikel langsung termuat penuh tanpa harus menunggu loading lagi.
Setelah mengetahui apa itu Flat Preloader dan fungsinya, saatnya kalian menerapkannya pada blog. Kalian hanya perlu mengikuti tutorialnya dibawah ini.
Cara Mudah Memasang Flat Preloader Pada Blogger
1. Buka Blogger > Tema > Edit Html
2. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg0pdAGU9jKmaRLNwKdMUs3uo-jULJe_eqcZsJwP-nZPWdTKMjoWtKOzCdB6oNdpYRYteYR3yrhbPajtxEYNv9neb7atTNuQXmzJPgqgbCiAaFWAy0AOUB4LGqZUsxL_JpdRwPTwK_tpI/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>3. Lalu Simpan
Demikian tutorial mengenai Cara Mudah Memasang Flat Preloader Pada Blogger. Bila anda merasa kesulitan menerapkan tutorial di atas pada blog kalian, jangan sungkan untuk bertanya pada kolom komentar dibawah. Semoga informasi yang diberikan bermanfaat dan sampai jumpa pada tutorial berikutnya.