Tutorial memberikan efek loading di blog

Di Posting Oleh : Blogger Bodoh (Fajerin Biabdillah)
Kategori : blogging programming web

Mau juga ada efek loading kayak Tutorial Belajar Komputer? 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 step 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/AVvXsEiwg2T0Cgvv39iUFHKEjWYfRRJtqrZwMNAWvzhBxcdX5eGqCygxEKTtt-gAkyBGXV5nb_VnWwJC85mKAYEYRQ86zuv4bJ-RKqF435SU0CGV0MyLyS_0WqZZt9HiUZb23hr_SvmDPHmT4hQ/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 blog adalah Zero-Cyclops