Langkah-langkah Pembuatan Loading di blog :
Langkah-1 : Login Blogger, Klik menu Template > Edit HTMLLangkah-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/AVvXsEgTi9srjGLc9-z-GqavyqgFPW8bZDWpTdt73QPvF0sHiLT1aNT4gSF_NxQAVqRxYaSEsmaSBTM61rxqxAiqxDHxFbqiekigf82qq8t0lDM1j87_XozFGxCbAZqYUzjMimlqGjNPxME40u7N/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 Menampilkan Loading di Blog paling Simple! yang saya buat ini bermanfaat bagi semua blogger yang membutuhkan!
Jangan Lupa tinggalkan jejak Sobat :)
0 komentar