Membuat Efek Loading di Blog

Membuat Efek Loading di Blog - Mungkin sobat sering melihat efek loading di beberapa blog. Menurut saya efek loading ini menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading. Bagi sobat yang mau tau demonya, silahkan klik salah satu artikel populer di blog ini, lihat ke samping widget yang berjudul SERING DIBACA.

Untuk membuatnya, silahkan ikuti langkah2 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/AVvXsEhhlU_Mfq6nRnhNZYFvv2_qXvohFZDmZxZNpbBailgNvizH3GjB68KGxQYQ6-C21VmIjfSED_pby_XVciSFk0M4LcnC7ovfwfgfgW9kIIyP0tzIfMmM1wu5Rosw8m_y_owQ7ku2dhnkaB0/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/AVvXsEhhlU_Mfq6nRnhNZYFvv2_qXvohFZDmZxZNpbBailgNvizH3GjB68KGxQYQ6-C21VmIjfSED_pby_XVciSFk0M4LcnC7ovfwfgfgW9kIIyP0tzIfMmM1wu5Rosw8m_y_owQ7ku2dhnkaB0/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...