Bagaimana Cara Membuat Efek Loading di Blog

M-S Blog || Bagaimana Cara Membuat Efek Loading di Blog - Mungkin anda sering melihat efek loading di beberapa blog orang. Menurut saya efek loading ini sangat menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading.(wkwkwkwkwk)

Untuk membuatnya, silahkan ikuti langkah-langkah di bawah ini :

Langkah 1 : Tambahkan jQuery pada blog sobat

Simpan kode di bawah ini sebelum </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu.

Langkah 2 : Tambahkan CSS

Simpan CSS ini di atas ]]></b:skin>

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymkPVLlOxQmAnpuM6cfTq_Mr9ljfHvjZBls-jGVFwx6rByhfq3yD_vl9nfkd8SRR7Z0QoV6ITfcpsOR1lkaGUGcM97CvRze-ooL7dlbgjEvcufQmThwTGOn1RznPKr2lxZe_kW4okzS4/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Untuk merubah warna sesuai dengan blog sobat, silahkan edit warna dan gambar pada kode

background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgymkPVLlOxQmAnpuM6cfTq_Mr9ljfHvjZBls-jGVFwx6rByhfq3yD_vl9nfkd8SRR7Z0QoV6ITfcpsOR1lkaGUGcM97CvRze-ooL7dlbgjEvcufQmThwTGOn1RznPKr2lxZe_kW4okzS4/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

Langkah 2 : Tambahkan JavaScript

Tambahkan kode JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Simpan template

SEKIAN & TERIMA KASIH