Menambahkan Animasi Saat Loading Di Blog

advertisement
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.

Menambahkan Animasi Saat Loading Di Blog

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

Salam,
Admin
advertisement
SHARE ON :

Artikel Terkait

Menambahkan Animasi Saat Loading Di Blog
4/ 5
Oleh

Subsribe

Masukkan alamat email Sobat untuk berlangganan blog ini dan menerima pemberitahuan pesan baru melalui email.

Load comments