Cara Membuat Efek Page Loading di Blog

Mungkin Anda sudah sering melihat efek loading dibeberapa blog. Menurut Saya efek loading ini membuat blog agak sedikit lebih kelihatan enak dilihat,dan membuat pengunjung blog tidak bosan untuk menunggu loading blog. Dan banyak sekali website yang menyediakan ajax loading page untuk blog, dan Saya juga akan membagikan beberapa efek animasi loading page yang Saya ambil dari salah satu web penyedia ajax animasi page loading. Salah satu web yang menyediakan animasi loading page adalah http://preloaders.net namun Anda juga bisa search di google situs-situs lainnya yang menyediakan animasi loading page.

Bagi Anda yang ingin tau bagaimana sih bentuk atau gambaran efek loading blog ini, ataupun Anda ingin menerapkannya ke blog Anda, silahkan simak tutorial dibawah ini:

• Masuk ke akun Blogger Anda.
• Pilih Template dan Klik Edit HTML.
• Lalu cari kode ]]></b:skin> atau </style> (Gunakan CTRL+F untuk memudahkan pencarian)
• Kemudian Copy kode css dibawah ini, lalu pastekan tepat diatas ]]></b:skin> atau </style>

/* CSS 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/AVvXsEgtd8a9zRV6IBm1ke2BV66BPkm_ENPq52CwexdKryOJ_MorYQMLj1OrHnmwTgoEStzgQq2UqsfpkmeP_6Q9CR6sd61n1v8zWKVafO8zQubKteoSd88bg_gpFW48L9qr5Fpl7yUUgrDt2JRj/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none} 

•  Setelah itu, cari kode </body> dan pastekan kode css jQuery dibawah ini tepat diatas kode </body> tersebut.

<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> 

• Simpan Template. Selesai.

Catatan : 

• Anda bisa mengganti efek animasi loading dengan mengunjungi website-website penyedia animasi loading page seperti yang Saya berikan diatas.
• Anda juga bisa mengganti efek animasi loading yang Saya sediakan dibawah. 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-526N4ltztXVo8Y1Bojyp5qJLt-wSI9Ot8bCiGp3caz6UeDkOo0eBljO_klrNVdi4SJR8kowsRV8u1Kq4eVfx8RcIh1YGPGT_dMbqNaK0SjbhHCNgPX6tDlZodVGnU4voCfULwJNY-ow/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaxLopt2rI2idnoQt_s-x6tlobbvnqhb2I6ircDqnfOZNljElRT1ia3JOQ1m1PcrchpOScXift2K84pvwaL1owiseWnreEnch5eY8MObd5ACkuwWP5yn8QHjYO0pmmUegNhBocNSpgykA/s128-no/Loading4.GIF

 https://lh5.googleusercontent.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.GIF

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpcHhCrYdYvvb1Na6EYGhjlsKc4b2zcWae3ECBipYXubN6m8H8Iob3lJNDVaf4kjuvSH7XPIgaCNj8_2Imw42AA3tyxRIeHkdVHw69zGHjz82he-Nu2N1AsNt1bBSpJORuR31BUZBOX0/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGD8ljG-Gw0Xo6yERxuYlpVCB3yhyphenhyphenhes9TjofLkGmsnhCRMpu_lWcqUJUMZpwI4MxuEIvxmOWQybrUQrdGKh_Hh9MukROLrNnjgiGIsktXu3CHyGSHN6HihAYQPPW6C3bzxbjdtA5TzQs/w128-h40-no/Loading10.GIF

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj73AmlcQ22d7EfjdfNpwCNcrlwg0waqYv8aHvG0X_Rkyz2oBzLK4isw6OUHJSTlNQQOMxql2rcdSutoy8yQpEBBbrAybpvYOZhu8k7HI13toyVVe0Be_lrfKwX1YZzyAw3NQltI5pHiic/s128-no/Loading1.GIF

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPWXgsaQLvT9dBCx1E2H4Ea0v7T4bi9FyTNgfVQZUItqKMsk_hkTu5wV2kD4qyr1Y6WRdkqGYfXYRBLDD_XPIhdt-ItIcWgdZ-tcn8IgW3fLDv3y4JebrEdwGjVFWl_fCbTka92l_2NIg/s128-no/Loading7.GIF

Cara Menggantinya:

Silahkan Anda ubah url berwarna merah yang terdapat di kotak kode css loading page diatas dengan url loading page yang sesuai dengan selera Anda.

Okay, sekian dulu BlogipRikardo memberikan tutorial Cara Membuat Efek Page Loading di Blog. Semoga bermanfaat, dan jika ada yang ingin Anda tanyakan silahkan berkomentar diatas. Terimakasih.

Tweet