Membuat Efek Animasi Page Loading di blog

Cara membuat efek animasi page loading untuk blog - Efek animasi pada blog ini adalah suatu efek page loading yang sangat sederhana, animasi page loading di blog ini sangat bagus dan keren sekali dengan efek-efek animasi loading yang begitu menarik. Banyak sekali pilihan efek animasi loadingnya. Sudah Banyak sekali website yang menyediakan ajax loading page untuk blog, saya akan membagikan beberapa efek animasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

Untuk membuat efek animasi page loading di blog, kita hanya perlu menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, Jadi Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Lalu bagaimana cara membuat loading blog anda keren? Solusinya yaitu dengan Membuat Efek Animasi Page Loading di blog. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog silahkan ikuti tutorialnya dibawah ini :

Tutorial Cara Membuat Efek Animasi Page Loading di blog

1. Pertama anda Login dulu ke blog anda
2. Klik Template lalu Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbxKV3UPnVdOXqFUrswa5XVCgN6CiG1Dh-Dptk6o4VPwAcBOp7qNKyHDMOfGoO81TZcs1vj34E4fOv9699ruMw3NMB65_JkvQ4TXyONJ6O8mD3hyphenhyphenrffl0bumIGkxnuBsu1oNtAliCAHMZ/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. Setelah itu anda cari kode </body>
6. Jika anda sudah menemukan kode </body>, Silakan anda Copy kode jQuery dibawah ini , lalu paste diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

7. Terakhir anda simpan Template

Catatan :
1. Anda bisa mengganti efek animasi loading
Baca : Kumpulan efek animasi loading

Cara menggantinya lihat tutorial nomor 4, kode yang sudah saya tandai warna biru silakan anda ganti dengan URL yang sudah saya siapkan di artikel sebelumnya tentang Kumpulan efek animasi loading

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe