Tutorial Memberikan Efek Loading Di Blog

Mau juga ada efek loading kayak ? Caranya mudah kok yuk simak dengan baik Tutorial memberikan efek loading di blog.

1. Login di Blogger

2. Masuk di Template - Edit HTML

3. Cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>

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

Catatan : Lewati footstep ketiga apabila blogmu sudah terpasang jQuery

4. Setelah itu cari lagi kode ]]></b:skin> kemudian letakkan kode dibawah tepat diatas kode ]]></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/AVvXsEiRGLcuLVVSRCS7sitKimoLcu3jKYVnOEa6f1MgmbRogHjfOuSrf7ftlBx3e1kVmo8FqF0GCjiXy-7YWmhXRfxroUuV2iKVveE8xFoU5qh1_H5XLB204ER-T1tOEMMLXzVPDgDijsH3VT0/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

color:white;

padding:1em 1.2em;

display:none;

}

5. Terakhir cari kode </body> kemudian letakkan kode dibawah tepat diatas kode </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>

6. Simpan template

Silahkan cek blogmu klik salah satu posting dan akan loading seperti ini

Sumber Tutorial memberikan efek loading di weblog adalah Zero-Cyclops