Membuat Efek Loading Di Blog

Selamat datang kembali di Joe Erick Blog. Pada postingan kali ini saya akan membahas tutorial tentang Membuat Efek Loading Di Blog. Efek loading pada blog digunakan untuk mempercantik dan membuat tampilan blog semakin bagus dan keren, agar visitor juga tertarik melihat tampilan blognya sobat.
Mungkin pada tutorial kali ini saya belum bisa untuk menampilkan demonya, silahkan sobat cek sendiri jika nantinya sudah siap diblog shobat.

1. Masuk ke Blogger kalian, Kemudian Pilih Edit HTML
2. Copy CSS berikut diatas kode ]]></bskin>

#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/AVvXsEiLJZcKEp7pXDxVbfDjpSFb5nhKz7C17Zonnm833dSKPrYoRM92-OpcHLwgVGpBazye_Utf9NV_iVk2Cf2q5dgVZbbKnujsdJ_3L6IucRMIcs970T1ChtOC3ftO6CpCpiwhSfkV2BKbfjz0/s320/load+labeltutorial.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

Info :
1. Kode Background: #303030 = bisa anda ganti dengan warna yang anda sukai jika anda tidak paham akan kode warna HTML bisa cek menggunakan tools kode warna disini
2. Kode yang berwarna merah bisa anda isikan dengan URL gambar gif/animasi milik anda sendiri atau anda bisa gunakan gambar yang diatas nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan tools di website dibawah ini:

www.loadinfo.net
www.preloaders.net
www.ajaxload.info

nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga

3. Copy kode dibawah ini 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>

4. Selanjutnya Save Template. Semoga sukses terpasang diblognya shobt...

Terima kasih sudah bersedia berkunjung dan menyimak tutorial singkat saya tentang  Membuat Efek Loading Di Blog, semoga bermanfaat...

Share this post