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(‘http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/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(‘http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/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