Cara Memasang Animasi Preloader di Blog atau Website

Oleh Adyt-

Sunday 3 January 2016

Loading of http://ift.tt/1kBHuvU

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> .

HTML<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('http://ift.tt/1kBHuvZ') 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.

from Info Center Blog http://ift.tt/1OEdDAZ

Tag : Tips, Tutorial

Explora Tips