Cara Menambahkan Page Loader di Blog

Ok kali ini saya akan sedikti share tutorial mengenai Cara menambahkan animasi page loader. apa itu page loader ?
jadi begini, page loader adalah animasi yang terletak pada saat kita mau berpindah halaman, jadi pengunjung akan merasa terkesan karena tampilan blog kita menjadi lebih keren, tapi ada juga yang berangggapan bahwa menambahkan page loader membuat blog kita jadi lemot. tapi itu semua tergantung dari diri sobat blogger masing masing lho ya.
percaya aja pada diri sendiri :D

ok langsung saja daripada bertele tele, ikuti langkah langkah berikut ini untuk membuat animasi page loader tersebut :

langkah pertama, kita tambahkan kode jQuery pada blog sobat. simpan kode dibawah ini sebelum elemen </head>
jika template sobat sudah memiliki jQuery maka sobat bisa abaikan step pertama ini

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

Selanjutnya tambahkan kode CSS. simpan kode CSS ini diatas ]]></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/AVvXsEhCGVTEy-rlamZvAOR2B8mmvlnThmgyZvmupf-GySR5fDy2oc6xxHmtI4zFLIiVhkvIJxo9OaCSrf9W2QCJ4wxPRJq_bG4mJsj2IcfWDm_sUgGsos4gVYH_UjR8FjlpM0syKAVsVPq65VE/s200/load6.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; }

Selanjutnya tambahkan kode javascript ini diatas elemen </body>

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

#kode biru diatas adalah kode gaambar animasi yang akan sobat tampilkan pada blog sobat, jadi sobat bisa ganti dengan script animasi page loader dibawah ini :