Membuat Efek Loading Seperti Blog Kang Ismet

Membuat Efek Loading Keren Seperti Blog Kang Ismet - Selamat datang sobat semua, sekarang saya akan membagikan Tutorial '"Membuat Efek Loading Seperti Blog KI"  efek loading ini memang sudah populer / sudah banyak yang membagikannya, tapi tidak sempurna rasanya jika tutorial ini tidak ada di blog kesayangan sobat semua. Silahkan simak baik-baik tutorial ini.

Langkah Pertama : Buka Blogger > Template > Edit HTML

Langkah Kedua : Masukan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

#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/AVvXsEgjOuU4Vb2rA1AzV9C97hNqoDEiO-A1Hy5gqmYrKGtq1U32Nz43BxoRpLfYp_UYkmBw1lCF-1TZX_0fZ8vrrZB28mCSjbI9i6u1ozRbdYA-mUH16Gb9KkqpQiJtUO6O7qx-PBQhFp4pgZc/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Langkah Ketiga : Masukan kode 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'/>

NOTE : Lewati langkah ketiga, jika template blog sobat telah dipasangkan Libs/Jquery.

Langkah Keempat : Masukan kode 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 Terakhir : Simpan template sobat...

Tweet