Cara Memasang Efek Loading ala Blog Kang Ismet

Assalamu'alaikum Wr. Wb. sobat Fakhrie
Sudah beberapa hari saya tidak posting-posting artikel di blog ini karena tidak ada inspirasi yang terbesit di otak saya. Namun, pada malam hari ini saya iseng-iseng mengunjungi blog kang ismet yang kata sobat-sobat blogger merupakan seorang Blogger Profesional a.k.a Mastah (baca = 'Master'). Setelah itu, saya coba klik postingannya dan saya-pun terbelalak melihat efek loading yang sangat elegant. Akhirnya saya mendapatkan inspirasi untuk memosting artikel di blog ini. Apakah topik artikel yang akan saya bahas di postingan kali ini? Yapp, saya akan bahas tentang efek loading blog kang ismet.

Penampakkan efek loadingnya seperti ini :

Gimana? keren kan?

jika sobat ingin memasang efek loading di blog yang sobat miliki, silahkan disimak caranya baik-baik.
Langkah-Langkah Cara Memasang Efek Loading ala Blog Kang Ismet :

Langkah Pertama : Masuk Tab Template > klik Edit HTML
Langkah Kedua : Cari kode </head>
Langkah Ketiga : Copy kode dibawah ini :

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

Langkah Keempat : Letakkan kode tersebut tepat diatas kode </head>
Note : Lewati Langkah Kedua, Ketiga, dan Keempat jika blog sobat sudah terpasang JQuery 
Langkah Kelima : Cari kode ]]></b:skin>
Langkah Keenam : Copy kode dibawah ini :

#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/AVvXsEhR4DgQcDIyDNznr-zk3WXeOGyp0vclrqgk64PD8WOYQnXMbLx9wIltozeJel61RWxDdqTmL-YkJrB5cD5MZDaxvQERLt0DYm18KCccXIN14zCvkjpfVCO5fDyT8pEmp7bmgh2HjGFJfuQ/s200/load6.gif") no-repeat 50% 50%;
    padding:1em 1.2em;
    display:none
    }

Langkah Ketujuh :  Letakkan kode tersebut tepat diatas kode ]]></b:skin>
Langkah Kedelapan : Cari kode </body>
Langkah Kesembilan : Copy kode dibawah ini :

<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 Kesepuluh : Letakkan kode tersebut tepat diatas kode </body>
Langkah Kesebelas : Klik simpan template.

Ikuti langkah-langkahnya secara urut dan runtun, InsyaAllah akan berhasil :)

Yosh, semoga artikel ini bermanfaat bagi sobat ^_^
Jika ingin menCopas jangan lupa cantumkan link sumber. Terimakasih