Cara Membuat Efek Loading Keren di Blog

Cara Membuat Efek Loading di Blog - Waktu loading pada blog memang cukup menganggu bagi para pengunjung. Dan sayangnya, hal itu tidak bisa sepenuhnya dihindari oleh para blogger. Salah satu untuk mengurangi titik jenuh visitor dalam menunggu loading tersebut adalah membuat Efek Loading yang keren. 

Mungkin anda juga sering melihat efek loading di beberapa blog. Menurut saya efek tersebut selain sedikit menghilangkan rasa jenuh menunggu juga akan menambah cantik penampilan blog.

Untuk membuatnya, silahkan ikuti langkah-langkah sederhana berikut 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/AVvXsEipEUpdqYiM6LdWFIqdBJozUa9IWvoZAI-wUDrzuJ9rXuotJEzX4dg-7uFwP-ZejCg9sOWRrDgyghtMXhgcuCpk83bpjOpmHHUJdzAmKmqo405kyHwTfO1n2BKJjBsaHH1IM1b8mEUsvoM/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/AVvXsEipEUpdqYiM6LdWFIqdBJozUa9IWvoZAI-wUDrzuJ9rXuotJEzX4dg-7uFwP-ZejCg9sOWRrDgyghtMXhgcuCpk83bpjOpmHHUJdzAmKmqo405kyHwTfO1n2BKJjBsaHH1IM1b8mEUsvoM/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

Langkah 3 : 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...dan SELESAI