Cara Membuat Loading Blog Keren dan Responsive

Siapa sih yang nggak mau Blog-nya keliatan keren? Pasti gak ada kan. Untuk kesempatan ini saya mencoba berbagi tentang Cara Membuat Loading Blog Keren dan Responsive.

Okay, langsung saja mari kita simak Cara Membuat Loading Blog Keren dan Responsive sebagai berikut:
Pertama, tentunya masuk ke akun blog Sobat
Kedua, masuk menu edit template
Ketiga: Tambahkan jQuery berikut pada blog sobat. Tapi kalau sudah ada jQuery lewati saja langkah ini. Simpan kodenya di bawah ini sebelum </head>

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

Keempat,  Tambahkan 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/AVvXsEjuWNIN1N9Nj3x7B2QiM112iD-ADxZXtelt91ohDoziO7-NT6PiVgY6EUgtbl03aAPiEgx0kf2JkACO-fHgTY6pVvJ-W7uc4fqidm0YYNTnt5rCYpj-DyW7-XCjIQ9tPgzjBW2mCGgY2EE/s48-no/R.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

NB: Warna biru adalah warna background dan warna merah adalah efek gambar loadingnya. Silahkan ganti dengan selera sobat. Untuk update warna klik di sini.

Terakhir, 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>

Selesai sudah Cara Membuat Loading Blog Keren dan Responsive. Semoga bermanfaat.