Menambahkan Animasi Saat Loading Di Blog

Setiap blogger ingin blognya menjadi yang terbaik diantara blog yang lain, minimal menjadi yang terbaik untuk si-empu blog. Jika sobat mengenal blog saya yang sebelumnya Hanya Ingin Jawaban, ada effect ketika loading / menunggu page selanjutnya terbuka, muncul animasi unyu-unyu yang melambai-lambaikan sapu tangan.

Sama seperti setiap kali sobat akan mengklik link apapun untuk meninggalkan halaman ini, sobat bisa melihat perubahannya (sudah tidak digunakan). Untuk menambahkan efek ini, caranya sebagai berikut

Masuk ke Template → Edit HTML, paste kode tersebut diatas </body> (untuk memudahkan sobat bisa menggunakan ctrl+f)

<style>
#abt-page-loader {
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%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

ket : disana ada URL http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif, silahkan ganti dengan url gambar yang sobat inginkan

Untuk melihat hasilnya silahkan Save template.

Itu saja tutorial menambahkan animasi ketika loading di blog, silahkan dipraktekan kalo mau, semoga membantu

Leave a Comment