Cara membuat Loading Efek Animasi di Blog

Cara membuat Loading Efek Animasi di Blog - Efek loading diblog memang sangat menarik kita terapkan diblog kita, apa lagi diblog yang agak berat loadingnya, Banyak, situs Sekali Yang menyediakan ajax loading page untuk blog, Dan saya juga Akan membagikan beberapa efekanimasi loading page Yang saya ambil bahasa Dari salat Satu web penyedia program ajax animasi loading halaman.

Untuk cara membuat efek animasi loading halaman di blog kita hanya menggunakan sebuah CSS Dan jQuery agar Bisa menjadi sebuah efek animasi loading halaman di blog, langsung saja ikuti tutorial dibawah ini:

1. Masuk ke Blogger.com
2. Klik Template Edit HTML
3. Cari kode ]]</b:skin> atau </style> dan pastekan kode dibawah ini di atas kode tersebut

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

4. Cari Kode </body>
5. 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>

6. Simpan template

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglotZ29YqjluE-UV63r_JJZ-b95i96zacRhqHr-EcpbwJEtU9_dP9lmB8tyGy4MCwJJcZoTweVy73R4YgIPDBEW27C6NwMmlhg79GMJVzk8OFCWbuqYGPP70x0GQ2BzNylH4rPoBqVia8/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_qLxOWiN5ipUgaR6lkZxa0D816RRI-2Ovb6ps24NVZhwDvcqPMO6M2CM9n3a46g0ZtxYUbNSBo-VyE2VGpXnruWi3wUW7eaQmJLy_FGXkgxJpTeYVU4AiS-ItUV9bFdU0wazKnzemY0/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtdWZABz7dJCo6XqNsjnXZqQ1SiIa_cueG1tFiTTDQDrFV0RLnDWuATLlxZPi6wzXil-6PQrL4u9Eu1DISS_rChhn3A9hLCatJjRqqUDuXN3BUiPo2mOI-JUS0z_EjEDP6fotIhyphenhypheny32Q/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4l0xxJWyTxXTXdaa11NeW-LibrBqkhh_uLJkZlb2CaWXxHTuQSHE_sBHLX8cZCXXL_cApDthYQvM_iPtHCxyeZu-TkFBk_cVde7IywxUUUit6E56wiZLEVIZCsGZuGUaIXUlA1MYJSAI/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjFzQBrRBKKz6rm_SB2R98oM6v69RTohDTWAOo2i7U4H08uBzKfCz4CfrYX_dGKQYrvjg6uOaa60XkcRGnCwvqJxx3tyduvPgC1yiEyXFMzgh6bYWMGUOQHXx3xMqkGy-uUmNj2iPe9N8/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD6p3evJzfUMDIgEgWvUWXKSUikWt4iEpYxFP5QUlwCgLKb-H0ALz-eoVf3X1bZVxAEkztzyBiNDUX4WaNrqk-yug7eO9E3T283wRwDXTQr_zqeK-C4qOXact-8mVm9dAiUbZWhdw_IBg/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJjXcKC_AJk_q4udtT_VsuqnSyevsdIOZ0PEvrZMbwiIqZFVqWvkS6jXmEP2HiEHryMThhE-IAVQQwz9w5FrGfuzuJRENUxtf7zSFylNhQndep2m9Eb9G5w1vJgAExy243G_oTrMFupg/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTUmPEOtVLRgiK0UDYNSr3BAUaJIYBasg84nsVgZHYrstWruc-gYUnXPsVaWQeZ-5AjWmXbCeAGEiKfHTfTxn26CaorgFJjic10ml3t79_OyG1W1pT6iqFAr8m0HPBik6yCCMTRZh4FQ/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEnIXbn6MKPGIGGoz31JcXPU53v-KYAQc0uShT4KftIcN8Ye2Vn5HYa8C_MiLXyfHlOiaadv8oBeJlnyjVouxKj0FECdK-YbEB7lA6DLyW-fMwfhdbDqDglOFRV_SCTDKUxwXrmgbxJT0/s128-no/Loading9.GIF

Bagi yang masih kurang puas sama animasi ini anda bisa mencarinya disini preloaders.net