Cara Membuat Efek Loading di Blog

Kali ini saya ingin berbagi  Cara Membuat Efek Loading di Blog, jadinya saat kita ngeklik suatu artikel akan ada efek loadingnya, contohnya diblog saya ini. Mungkin efek loading blog ini tidak perlu bagi blog, tetapi jika sobat ingin terapkan silahkan sobat bisa langsung copas saja scipt di bawah ini sebelum kode ]]></b:skin> :

How To Make Loading Effect :

  • Masuk dulu ke Blogger
  • Pilih Template > Edit HTML 
  • Taruh Kode Dibawah ini diatas kode </style> atau ]]></b:skin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzY1uLuOVz6LZJdzeXf-fel6rMkVmimdSlMwxaqBmk7WVtMNYW-NtDmJsbzdvdggige-zwuW03IEzlYOddfhpkye7NxLNLu6DtrdLwVtLLgPMIcg3tLFpodRHnLSvtc-yPjujutjrnuY/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
  • Masukkan kode dibawah ini diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Kalo Jquery sudah ada di blog agan, langkah ini dilewati saja
  • Masukkan kode dibawah ini diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif 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>
  • Yang terakhir Save template, Selesai

Tidak ada komentar:

Posting Komentar