Cara membuat efek animasi loading di blog

Berikut saya akan memberikan cara mudah membuat animasi loading di blog,mungkin sudah banyak dan sudah umum banyak artikel yang membahas tentang cara membuat efek animasi loading keren di blog,tapi tidak ada salahnya saya ikut sedikit berbagi tutorial,mungkin ada yg bertanya bagaimana cara membuat efek loading yang seperti di blog ini?nah berikut cara mudah dan ga ribet. . hee

Langsung saja ke caranya sob,ikuti langkah-langkah dibawah ini:

---

1.tambahkan jQuery di bawah ini pada blog anda,letakkan sebelum </head> pada tempelate anda. . ! !

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

KETERANGAN:
Jika dalam tempelate anda sudah terdapat jQuery,langkah 1 abaikan saja.

2.Copy dan paste CSS di bawah ini tepat diatas ]]></b:skin> pada tempelate anda.

/* page loader */
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url(' data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=' ) no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; text-shadow:none }

Nah langkah ke 3 tambahkan jowoscript atau istilah bulenya javascript dibawah ini diatas kode </body> pada tempelate anda. . ! !

</script>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"> </div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});
//]]>
</script>

Sudah belum?kalau sudah ya langsung disave saja bro,refresh blog anda dan lihat hasilnya efek animasi loading pun sudah terpasang di blog keren anda. . :)
Sekian artikel dari saya,Semoga bermanfaat. .