Trik Membuat Efek Loading Di Blog

 

Langsung saja kagak pake lama...


Langkah Membuat Efek Loading...

1.  Masuk TEMPLATE --> EDIT HTML
2. Cari kode ]]></b:skin>
3. Masukkan kode dibawah ini tepat diatas Kode ]]></b:skin> 

    

   #page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUF1e0YBcYVZG7_RHviqd3X0QUwoq3xaxBICGq3Ep-M6AB6L2FWdahYWvnvJlIU6CBQE53Cqg-zhfi0_dNPBNqo-gt9n-AEEgPofC7_GQdTVzB6ptSoMy4qsrlmhrEBqLZB2jM5lLHnube/s320/load+labeltutorial.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
} 

   Keterangan : Kode warna merah bisa diganti dengan URL gambar milik sobat sendiri.
   
   
   4. Masukkan kode dibawah ini tepat diatas kode </body>
   

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

   5. Save & lihat hasilnya