Efek Loading Page Sederhana Pada Blog

Baca Juga

 
Sagitarius Kusadhi - Efek Loading seperti yang sudah banyak beredar tentang tutorial efek loading ini, namun kali ini saya akan membahas cara membuat efek loading di blog dengan tidak mengaktifkan efeknya pada saat mengklik tautan pada tab baru, selain untuk mempercantik penampilan blog memperkeren atau apa sajalah kalian menyebutnya, cukup pasang saja sudah, berikut tahapannya.

Cara Membuat Efek Loading Pada Blog 

1. Masuk Dasbor => pilih Template => Edit HTML
2. Temukan Kode ]]></b:skin> atau </style>
3. Masukkan Kode CSS Berikut tepat di atas kode yang ditemukan

#page-loader {

position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:black;
color:white;
padding:1em 1.2em;
display:none;
}

4. Masih di Edit HTML, silahkan cari kode </body> dan Taruh kode berikut tepat diatasnya. 

<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

5. Terkahir Simpan Template Begitu saja tips kali ini tentang membuat efek loading pada blog, semoga berguna dan bermanfaat.