Membuat Efek Loading di Blog

Advertisement

Membuat Efek Loading di Blog - Hay, selamat datang semua. Kali ini saya akan berikan tutorial Membuat Efek Loading di Blog. Efek loadging ini sudah banyak di bagikan banyak orang, tapi kali ini saya akan share lagi tutorialnya. Belum tau tutorialnya? Simak baik-baik.

Langkah Pertama : Buka Blogger > Template > Edit HTML.
Langkah Kedua    : Masukkan code CSS di bawah ini di atas 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/AVvXsEj3aIzfwW6JjAM1QHkIjqhsSK7QfVtcEBfop1SUsLvI3OHPxOnwm6Xb_07FEwM94GKHOjESUiSBUgUMKw7rwfd2m4la2kGYKnuA-KO_eCcbscfBe-yUYZLIk6t_zSzr3LhKBVLc9aWrWHA/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Langkah Ketiga    : Masukkan code di bawah ini tepat di atas </head>.

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

Catatan : Lewati langkah ketiga jika template agan sudah di pasang Libs/Jquery.

Langkah Keempat : Masukka ncode di bawah ini tepat 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>

Langkah Kelima   : Ter'akhir klik Simpan Template.

Sudah taukan cara Membuat Efek Loading di Blog? Pasti sudahlah.
Lalu agan cek blog agan, pasti sudah ada efek loading seperti di blog saya.
Oke sekian dulu Membuat Efek Loading di Blog.