Membuat Efek Loading Blog Ala Alvin Warasi

Selamat siang sahabat Blog Alvin Warasi, pada kesempatan siang ini saya akan membagikan trick yang lumayan keren yaitu "Membuat Efek Loading Blog Ala Alvin Warasi"

Simak langkah-langkah di bawah ini:

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML
3. Tambahkan kode CSS berikut ini tepat di atas kode ]]></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/AVvXsEgZA_DeiSlEGxURMoi-o4c3yrYlWZbzr-E3Y6kJd3JI2Wv3wF1U1jZsfqjSX-NnkpHY0Qusyq9NOA8WoAsvzo93fo7w7IR8ffwpYpec81FTNJmtPuOP7AMVzkxirlSnfNu_X9jbuDJ0oaM/s200/load6.gif")            no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

4. Msukkan kode JQuery di bawah ini tepat di atas kode </head>

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

NOTE:
Jika template blog Anda sudah terpasang kode JQuery di atas Abaikan saja untuk langkah ke-4 ini (Tidak usah di pasang)

5. Masukkan kode Javascript di bawah ini tepat di atas 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>

6. Kemudian Simpan template Anda dan lihat hasil-nya :)

Okeyy,.. sekian dulu tutorial yang bisa saya sampaikan pada kesempatan siang ini,..
Semoga tutorial "Membuat Efek Loading Blog Ala Alvin Warasi" ini bermanfaat bagi Anda semua-nya,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250