Cara Membuat Efek Loading di Blog

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 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/AVvXsEjqU31qCCuFoRKsFgC-ddUPhRfH6QsLa-Ypb2Iz451aCJD5nehocMxt5P2pKVI9CQEOPi5m3cuzzvUz5dJJhHv7ErwFUa7snAOCwSetcFKb07H7ScPKK7hArUsdyCMmitzxIyg_RhuHceg/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/AVvXsEjqU31qCCuFoRKsFgC-ddUPhRfH6QsLa-Ypb2Iz451aCJD5nehocMxt5P2pKVI9CQEOPi5m3cuzzvUz5dJJhHv7ErwFUa7snAOCwSetcFKb07H7ScPKK7hArUsdyCMmitzxIyg_RhuHceg/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>

 Gimana mudahkan? Silahkan mencoba.... ^^

Terima Kasih Anda Telah Membaca Artikel
Judul : Cara Membuat Efek Loading di Blog
Ditulis Oleh : Unknown
Jika ingin copas tolong kasih alamat yang menuju ke blog ini. Thanks Before :)