-->

Senin, 30 Januari 2023

Inilah Cara Membuat Efek Animasi Page Loading di Blogspot


Cara Membuat Efek Animasi Page Loading di Blog - Page loading adalah satu fitur untuk menampilkan efek loading ketika perpindahan page. Dimana pada perpindahan halaman blog akan ditampilkan gambar atau animasi tertentu. Untuk membuat efek animasi page loading tentunya tak luput dari CSS dan jQuery.
2014-09-08_171418

Pada dasarnya dengan page loading ini diharapkan tidak memberatkan, yang terlihat kesan dari page loading ini seperti memberatkan waktu perpindahan page. Dengan menggunakan efek animasi page loading ini tidak akan memberatkan Loading Blog anda, sehingga anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada Blog anda.

Efek Animasi Page Loading juga dapat menambah nilai plus pada Blog anda, karena dapat mempercantik dan menarik untuk dilihat. Dalam membuat Page Loading kita perlu mencari code </body> , apabila sudah menemukan anda tambahkan jQuery pada blog sobat. Simpan code di bawah ini sebelum </body> atau tepatnya letakkan tepat diatas </body>


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



Penjelasan Script diatas 
Pada body Background disisipkan kode'<div id="page-loader"></div>' 
ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 1000detik, dilakukan penundaan 8000detik, dan kemudian diakhiri dengan efek fadeout 1000detik.


Setelah kode diatas sudah anda terapkan, kemudian anda cari kode ]]></b:skin> anda letakkan sebelum kode atau tepatnya diatas kode ]]></b:skin>


page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}



Keterangan :
Background  dapat diganti menyesuaikan kondisi blog sobat.
URL Image adalah tempat menyimpan URL image, apabila anda memiliki kategori gambar sendiri, kemudian menguploudnya lalu anda terapkan. Setelah semuanya selesai di terapkan lalu simpan template dan lihat hasilnya.


Efek Animasi Loading Page .Gif

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

loading1%2B(1)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfebw3tzVLnEir9imC0RIxnlib8RzQfvkmsxqiXeBoBKbDAUHeqKE38s1omGpxuCYPaVHRz53BDYMJnBWAIZJcQDsqyfA_99uL3n79ltD3J4_c7kbQb_VdZOl6NEl0PfpXOgGejto_8Jg/s1600/loading1+(1).gif


Loading1


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QfwvYo9N5xxC-uOV9vuZrR6RzWMkTkkl6O-b7Sy9CuylhaLsmXDe9BI6xv87nUGS65S9Kbo3z0YtyaWwwfqilt7n5RKsEQbhImmjTcPKV8aEvwvsPMtInTA3tzGmK5EhgpNeCMWNSVI/s1600/Loading1.GIF

loading2%2B(1)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXnf2f4YV7B27x5bUrrieP6kZJump4T8DnlTzQTsD5k9R_w8qGrobmH2lGwK3QmOBVmb8TTaWWHOjN6qV4_PX7ltnx_eDg4CHuTscbwx_75PkJgK6tRanu1SSEF8Szw32CpOQ1ostPUM/s1600/loading2+(1).gif

Loading2


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFHtvNtv3h0NowR5ymdZ_zpf0FHu7g0SKMDbRejYfScWIWHd7nvcKLWMqtGjpNO5GQGo2sZPujOwK-_21Iwd3pLVl61A3i8Ab_F-5XsU8lulXSb6mpPz46Gdq-WV1Rakl85GXyT8gnZvE/s1600/Loading2.GIF

loading3%2B(1)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDd6CwpDITwLWoaE42jE0v7OC7oYRGBVAVf5mv-bjw53GEGk5mo3wyLJ14WGwF2SwGIFUMDQeahyp9k3otPxmJYVdiciU_tA3eI2ce7vEyzr7_hUIlH-auBBZTfICya2BjqAWaaK9jeIM/s1600/loading3+(1).gif

loading7%2B(1)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx0q6KafIR7GpFQ-05y1qX_uRrY-sS0YaprtshnCllSHAiaaCNKSL0-AiL8P-PhxRo4KdK4Cqq4fgLo6eqsm9sZrbr-_Uw79eA-trnTj7PCycloj8ApEXGOTmX1_C3WaQaSJfqrofm3GI/s1600/loading7+(1).gif

Loading6


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJ-A6i_ZJc2W2x8ikY8tn90pieSnomjef9O4tPcBhRg2LLy5_V0TbLoNcP_xwnQMP5UVk2XJow4HmcjkwdRq0twJ4vCXmMmMbYB_ZXQfqmJys7lfoG2G5jyeFFQAWVKGeQRb5eqIhqDc/s1600/Loading6.GIF

Loading5


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEGHE_Ky55UabCDUJ8SuJyR2B88xJQu7yhvnnJ7qvDjejYsKn10dU3N9Mp8hTWLCVOIXkapujmzK1hRJy_9orOGyqyd5XImLI1h0-QvZf8VMlpT_6NAOTWnxZEuXuK8b0L3M0Tec3wN8/s1600/Loading5.GIF

Loading4


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cw7XELVRlxSK1wgSBrHotG_CSaPzzymdLEmsDoMon3S-5LJtcSghxPB3H-k2ru8BpfTnh_PSpUvIh_9OChdNkcFbQTEun0k-EhS8eUvgHb7HmV-GKm5clkdK_uaPx1gBAmha9lHm17Q/s1600/Loading4.GIF

Loading3


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitA-q69fKCODKtfSkCXUj8ZMZmF96ByMygRElpP3qnjICBOCS1uCJxBICWJl9H75DVLJeirTtDQgmqXccFVMDJM0o1B-yAxDp2Ay_Z4umZZR4nqJGHnKLVwkiF3j5xwp5B02n5NoOjpTI/s1600/Loading3.GIF


Loading8


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBJKRjfkA5fURQx6338V1us18hZfZ70sGwY7IJ4dABxbyhSvINQE9vO4T2K016CE0Hy79_2rdGDLqY09CCki_J7DRV4FKwtCiUv0utEIJFNIiiS45IQQLchjpHdP0yfha2Ltra9W6stJ8/s1600/Loading8.GIF

loading9%2B(1)


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxMHvKmt_FxevTC7_EoaY_YDgjIiutycjlgteci9jUe4OB83m6h9zncHsCVUQ-cozZRRvKtHz1CgcWNONpMqEqCQ0TsoODyAr6rJdYGI79ZxMOTAMDVVdFnV-zTN_BIItq7tBXrMKMM2s/s1600/loading9+(1).gif

loading10


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6YEKg8s_Xh29hK27hsAmfuPhIbC8aeZNoAgZf2a6g1ew4jucM1wHQYl1DXKmB7r2ROS5UYQP29DlUgJHlcSeRm0YFuMw09C36N1TBYAgNl6GKe4f0kIBbnTpp1_KlasrsQ1r2bk3B62o/s1600/loading10.gif

Loading9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUVVMJDUYE_Nw3mD7ttgHxAZHEF4wzdnk4ySRiJtMdA_caf-WlPOFUHTVB1ji779bsBYZWre_j7NE3YVF_I1WulEcKWqxXJPFzJje_LBW37w4oXMYoS7gsteMDNfjZ7ub9lmcssxOmsRc/s1600/Loading9.GIF


Gambar diatas hanya beberapa bagian yang saya ambil, apabila anda ingin memiliki banyak pilihan Animasi efek loading.Gif dengan mengunjungi website ini http://preloaders.net.
Sekian tutorial tentang cara membuat efek animasi page loding di Blogger, semoga bermanfaat.(http://www.aak-share.com/)



Baca Artikel Terkait: