Rabu, 21 Juni 2017

Cara Memasang Animasi Preloader di Blog

Loading
Loading...
Kalian pasti suka animasi kan. Kali ini saya akan memasukanya kedalam pelajaran ngeblog ini. Yaitu Cara Memasang Animasi Preloader di Blog atau Website. Dalam kali ini animasinya akan ringan dimuat karena menggunakan format GIF bukanya flash yang sangat lambat dimuat.
Fungsi preloader ini adalah sebagai alat jeda waktu sekaligus memberikan hiburan bagi pengunjung atau menarik pengunjung.

Untuk memasangnya kalian harus masuk ke pengeditan template dahulu.

Pemasangan Animasi Preloader di Blog atau Website

Pertama masuk ke dashboard kemudian ke template terus Edit HTML. Kemudian masukan kode di bawah ini sebelum </body> .

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('http://2.bp.blogspot.com/-alum9K2SRYg/VjqAgYxuVCI/AAAAAAAAL-g/dkWivHcWDYg/s1600/preloader.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Jika sudah simpanlah template kalian. Kemudian kalian test. Kalian bisa mengubah animasinya sesuai dengan kesukaan kalian atau pengunjung kalian.

Artikel Terkait

Hidup itu sederhana, namun seringkali kita lah yang membuatnya menjadi sulit.