Cara Membuat Animasi Loading di Blog keren!

Terkadang ketika kita mengunjungi sebuah blog dan saat kita mengklik link di blog tersebut maka akan ada tanda Loading yang menampilkan bermacam-macam bentuk dan background, tentu saja ini membuat tampilan blog akan menjadi lebih menarik, so sobat berikut ini trik atau cara membuatnya di blog, ikuti langkah-langkahnya di bawah ini.

Langkah-langkah Pembuatan Loading di blog :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :

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

Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.

Langkah-3 : Copy kode CSS di bawah ini, setelah itu paste tepat sebelum tag </head> :

<style>
/* LOADING HALAMAN */
#loadingHalaman {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39cgY-XnSDJyMjtqaiCeAMJP229Lwh2yAIiHvlF10ucijAO4VtegYOivqlGkJ-sicrG7B-31AwVxIk0jGhwsfWK0PJN9qzL5qiKc48-giiQXbxQLHF4ln8bnwLJYBlr6ef8LP1_Y03-Xv/s1600/dark-loading.gif) no-repeat center;
background-color:rgba(0, 0, 0, 0.32);
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}
</style>

Langkah-4 : Copy kode HTML di bawah ini, setelah itu paste tepat setelah tag <body> :

<div id="loadingHalaman"></div>

Langkah-5 : Setelah itu simpan kode jQuery di bawah ini tepat sebelum tag </body> :

<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
    $('#loadingHalaman').slideUp(1000);
});
//]]>
</script>

Selesai!

Untuk demonstrasi bisa sobat lihat pada halaman blog ini, klik pada setiap artikel dalam blog ini untuk melihat tampilan demo nya!

Semoga artikel tentang Cara Membuat Animasi Loading di Blog keren! yang saya buat ini bermanfaat bagi semua blogger yang membutuhkan!