Cara Membuat Efek Loading di Blog

Cara Membuat Efek Loading di Blog

Waktu menunggu pergantian halaman pada blog memang cukup menganggu bagi para pengunjung. Dan sayangnya, hal itu tidak bisa sepenuhnya dihindari oleh para pengguna blogger. Salah satu untuk mengurangi titik jenuh pengunjung dalam menunggu terbukanya halaman baru yang dituju adalah dengan membuat Efek Loading pada blog.

Mungkin Sobat juga sering melihat efek loading di beberapa blog. Menurut saya efek tersebut selain sedikit menghilangkan rasa jenuh menunggu juga akan sedikit mempercantik tampilan blog.


Untuk membuatnya, silahkan ikuti langkah-langkah berikut ini :

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'/>

Catatan : Apabila template sobat sudah memiliki Jquery, lewati saja langkah ini.


2. Simpan CSS ini di atas kode ]]></b:skin> atau </style>

#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/AVvXsEh0h_DaaTzPmBNltrKFR8FtlSGDrBS9ArVfb6hRhpT_gM7NHAvGeHBYiQD5QUTHKsf4qYGE_RUlYdK3Ot5TOGetUyufYsqnOOT2XxfH1jEfgDYTn65-MniBRhUyELUUcpo4q4F1RcrdVOs/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Untuk merubah warna dan gambar silahkan ganti kode seperti di bawah ini :

background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0h_DaaTzPmBNltrKFR8FtlSGDrBS9ArVfb6hRhpT_gM7NHAvGeHBYiQD5QUTHKsf4qYGE_RUlYdK3Ot5TOGetUyufYsqnOOT2XxfH1jEfgDYTn65-MniBRhUyELUUcpo4q4F1RcrdVOs/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

Sobat juga bisa mengunjungi situs loadinfo.net atau preloaders.net yang menyediakan beberapa pilihan untuk gambar animasi bergerak.


3. Tambahkan kode JavaScript ini di atas 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>

4. Terakhir simpan template dan lihat hasilnya.

DEMO

Sumber : http://www.dte.web.id/2013/01/efek-animasi-loading-dengan-event.html