Membuat efek loading blog Ala kang ismet

Selamat malam sahabat Blog Irvan Efendy, Pada malam yang sunyi ini saya akan membagikan trick yang lumayan keren yaitu "Membuat efek loading Blog Ala kang ismet"

Simak langkah² dibawah ini:

1. Login ke akun blogger anda

2. Klik Template » Edit HTML

3. Tambahkan kode CSS berikut ini diatas 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/AVvXsEgRROULrCZt2IOSrKPSy9UHCACBlFt3YygSwK35tU8GWx2SsxuMGpggQ2Pc7Ja0zTZE6OJlGzSXx3Q1wEc2eB7EzDR7WytYUyoF7P11NR10dFcXE5FllDQk0NmlPqVfFSBsIUuOwjLxZLI/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

4. Masukan 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 sobat sudah terpasang kode JQuery di atas Abaikan saja untuk langkah Ke- 4 ini (Tidak usah di pasang)

5. Masukan 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 sobat dan Lihat hasil nya

Okeyy,.. sekian dulu tutorial yang bisa saya sampaikan malam ini,..
Semoga tutorial ''Membuat efek Loading Blog Ala kang ismet'' ini bermanfaat bagi sobat semua nya,..