Membuat Loading Blog keren Dan Responsive

Halo Sob Posting tentang Blogging Lagi nih ane, Sekarang Ane Mau Kasih Tutor Untuk membuat Loading Blog Keren banget gan... Dan Lumayan Responsive..

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. 

Kelebihan memakai Loading Blog Ini Adalah:

• Blog Akan Terasa Cepat , (hanya terasa saja tapi itu sama aja dengan tanpa loading cuman sperti)
• Blog jadi Keren 
• dll

Dan Untuk membuatnya, silahkan Sahabat Ridwan Hex 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/AVvXsEh7KtClXaJnIxVtrS7i5qIDAYgON9FlM6aHvlrSmnabUwyR-CN2Wjln4HXZYkg5vTWV4vx7LyrhGABu0yGL1pJA2S2h46EFBnDYqBhC0y4KL8FPpiz1ni2UAk8g40yIqwMx53oA_kKQorM/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/AVvXsEh7KtClXaJnIxVtrS7i5qIDAYgON9FlM6aHvlrSmnabUwyR-CN2Wjln4HXZYkg5vTWV4vx7LyrhGABu0yGL1pJA2S2h46EFBnDYqBhC0y4KL8FPpiz1ni2UAk8g40yIqwMx53oA_kKQorM/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

Sekian Artikel Saya tentang Membuat Loading Blog keren Dan Responsive.Semoga bermanfaat.