Membuat Animasi Loading Blog Dengan Mudah dan Simple

Membuat Animasi Loading Blog Dengan Mudah dan Simple - Kali ini Saya akan Share tutorial Cara Membuat Animasi Loading Blog Dengan Mudah Dan Simple. Tutorial ini Mungkin Sudah Banyak terdengar dikalangan Sobat Sobat Blogger Yang ingin Membuat Blog Sobat Menjadi Keren dan Menarik. Animasi ini Berjalan Ketika Blog Sedang Loading. Jadi jika Sobat Memasang animasi ini di blog sobat, maka setiap sobat klik link di blog sobat akan muncul animasi seperti ini.
Berikut Tutorial Pemasangannya.

Tutorial

1. Masuk / Login ke Akun Blogger Sobat
2. Masuk ke DashBoard  >> Template >> Edit HTML
3. Taruh CSS Berikut di Atas Code </style> atau ]]></b:skin>

/***** Page Loader *****/
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfPfL8KP-SW2aDqfx2UFRJlZ1USXDByYWIGrQYtkj8SIHFHEn55FtvvNKkY4q51EtrHuXv0uvkPCxV8VojVokebZDbiyYI-Oy5Ec1v8xN79EqcBlzpkdtAna6cdeJGUNN1sUFqLdLAJH0/s200/load6.gif') no-repeat 50% 30%;
color:white;
padding:1em 1.2em;
display:none;
text-shadow:none;
}

4. Lalu Tambahkan Script Berikut Di atas Code </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>

5. Lalu Simpan Template

Simple Bukan... :)
 Sekian Dari Saya, Semoga Bermanfaat.  :)

Share this post