Cara Membuat Efek Animasi Page Loading Blog

Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. 

Untuk membuat efek animasi page loading di blog kita hanya 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, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Ok langsung saja lihat cara pemasanganya yuk:

1. Masuk ke Blogger.com
2. Klik Template => 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/AVvXsEhCKm5YmZDqA4TDeGyZRu4hLw9ZFfVe2I9BqY4sZ-oifzaAQsIXMT0nKfmz4Iem231o76dm7ImnkGI5pnF6iWxj8QvTJ02_BkGSyZydQwF7Q657f3JAgJ2onAhr6AJEEzfLay1yw-4uNVQ/s128-no/Loading7.GIF

') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. Cari kode </body>
6. 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. Klik Simpan Template

Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek animasi loading page, silahkan bisa Anda pilih dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdkMsG2dYCovFJgQgpAeFHbURrkpIffSMfLqIn0gqPQzfHnrAsCSp0XFEk6Kba_V5_aWBRHZtYGeG_NyrNKbDO0p8WSycrBSHQERCWzDOrRMWC1r2fnS8ebYwUJuaH0LqUuUBEaCaL9-2Q/s1600/loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJR-Qgnf1lo_-D9Z2fFTR9NtZMdaA-uwCmSW0To0jIq10vc7Ie513_PaR7MT3YAJXJaghDaOAfgfprZsI6xJpFK55Z0b_ylGkXZyalBmSIobGSkzVNbqaHKCSooyuZODz-AHFGcPveG4U/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBBcZ89fm-ng6QuaFl5h-tJtuBqW-OhtgUHxvuYIqN79Wj4CGG3zczd6P_pd5dT7t2D06Sdmsd0ER335l3D4Tgpm9TwTE6HiHANiPzcv3x-wF7dvUW5ki-nvjN3ALBFrIZg0TUrNJX_Zw7/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp-nWBtiRBtzrpnHRIhNCa2aFe-niXlXX91pDsq4C1A7Le4YrlgDy1HZmXrVFlSzbnOXGeu_LOJ8HQhk58YipN9zR2xd3CRCHxuCwO-MIp7bCuz45jvtjdgH_2u-5R63Yh7vTq7t0KNog6/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjMkZzTm9XgF2NNAcNaTOdxuBtYgs7uTeOz2uajjGehG7sE7CdCCDz_LvsvPbk28dNY1AqjUfBo_lBECLznnHQo0LpXjJLPIU4jVae1ZWJEHrhls4e_jzDcBo844SeZy93ec70Ra7FIxdz/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Nzc1f6wH-ZjCMrxjugJV7YWl0pTgKNnWr5pEEUGxxGM5IMOQsE97pQoOJmB1_WvLOHAec5nVF_rSCD492K3IX7N5xBwRQm9LLdq4iYLF_GwL8NUCDhRNKDU-jh15Vabu8YpDGTmuXyMx/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4W0OVD5fmBSvFsrI5GOiPyARuqWYY60Qy1FfXqPM22GFKCh9hNOsBmqTQijJZxyo7eM_V04DQNKxg9HDnlf2mQAp3dUd1UgpvyA7XnNkpaAuXI5ZA5e9ooz36xyipuwtZyHzLajDXLAK1/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3rSrqUMmrbKbu4wihfjUtQGaBSnWBbYAaomlGRNkyzGGob2vXLwNIKnAiKL_Z0nr3XO8yMAZ8Soy6f9cdWOYBKE8Rb5hvWQZef0KjE-BfENSgBWkHqt2VsGDwv3MCWZ1k6taifx9E-b_/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MYlg72FYzkjb4XHnLnrkwkSo9bxC7aq26mL4HMpA6L6vVzF0SzqKILu6vIHqs1k3pvkD3WObsrRF7Q6UKTsybh6Qes21ayOzN0-th8tvrYxWnUQjt_3n2RE33hCRPCDdgHoX9hzXuHf2/s1600/loading9.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZoTOZjJpYk7YoGMe9kyrBi57h0fpiBZ43L4okHUjFRbtdrEWQBB4nTGRewHRyEHsoIJhKmgRKNlrhbc-bb40otFQquHZ-HvvglRagSGIFeFasqVagIu-A81rHXsp9pyhIZG0P7DMV1bG/s1600/loading10.gif




Sekian Semoga Bermanfaat

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email