Memberi Effect Loading pada Blogger

Memberi Effect Loading pada Blog. Sekarang saya akan membagikan Tutorial "Memberi Effect Loading pada Blog", efek loading ini memang sudah banyak yang membagikannya di blog lain. Untuk memberikan effect loading pada Blog Anda, Anda cukup mengikuti tutorial berikut:

1. Login Blogger.
2. Pilih Template, Edit HTML.

3. Tekan Ctrl+F (untuk mempermudah proses pencarian) dan masukkan CSS berikut diatas ]]></b:skin> 

#page-loader {
   position:fixed !important;
   position:absolute;
   top:0;
   right:0;
   bottom:0;
   left:0;
   z-index:999999;
   background: #303030 url("http://fc06.deviantart.net/fs70/f/2011/053/b/3/abstergo_loading_by_tiroux-d3a4mor.gif") no-repeat 50% 50%;
   padding:1em 1.2em;
   display:none
   } 

4. Masukkan JQuery di bawah ini di atas </head>

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

Note: Lewati pemasangan JQuery jika di template Anda telah terpasang JQuery 1.8.3
5. Masukkan code di bawah ini di atas </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> 

6. Save template.

Share This :