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.
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 :
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFOXX7y_G7zXPJGRYpMbnG3kMHDotDwW-eXuoQZ71aAoaUwn60ehacyh0FwIaoFWjQFp1s75vormHs-w2EMv8qG59KWIgGdhVIP02krD4fwEy-A9X4lG85TzZY4Z1QBd1vJ_2DhPDSs9E/s1600/loading1+(1).gif
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4zVx8VgAwOf1EDzB9veg1sfF_dtQYE0K42f-EsHahZrRYT4WVy-lLjkpZMHspjnqZg196jJdPWuLLjtTSlLCWUVmEedPPo4Tcc_d91rwKQqtHEQWsGLjpaqque074LByKOJxMBBGHyc/s1600/Loading1.GIF
|
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUroMzA3ZeJsusnFrDhyphenhypheny_lK1iXYxlX1lSW2uFiI4QhGU0wA7E_zg7MfBs8dWoOLfRrGosXWu5glh98rJ0EfAXiCee6CWHULvOl6xcK7QSdHgENIVRZqHuTv8n0ulx8iGCmU_CsKc_wDw/s1600/loading2+(1).gif
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBrInVmtOR4DwzqPCMBCCYqppKua8NAiindtZhhJaIpKBjBzY2mPZFFxx4UJ3MEJ0J9YQqRseT6Tv98lzrq58_jOAyvtWsoRDZ385qUxieeJ8dfjW8GAQC4FxkQXSBwPmYkRau0Jjva8/s1600/Loading2.GIF
|
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMdQmAVpITr7n6CpcKO6DIN9P_vbcJG6hdsK4qzua1Cb3ARUNEAlGs3hgE0ZYBSelx639YN35XusaD1ciIvOBcg3OkIbQuYPjjvIzRkAtYUSDAoasGG0ikHuJR7GPi-Sb4fXnqvNWISiE/s1600/loading3+(1).gif
|
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjewMHn-YefCg76FfhqdQPUQECH6pjLafSXeUqiz4YsOHK9ca9tueKp0QKqv2agIio-QU7PUGDPiiUcqwfKzpkShhXITsaZq61InRA2Dpa6XbT-2zj70q5f4CGC4vso_hY7fOMu9T_TwaE/s1600/loading7+(1).gif
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiavxHZIzAGR9P6KEqGQxMw48hPjNRk2s7vYMv9sdaYIgt-pHnHWM3tQDubd4dBgZZP-6neEtcdcy4VLidbDroear7Ixihm3rpVl5RUOH6e8oA-0FCxe83KWluBBYKSL-PLD1ygrojge5E/s1600/Loading6.GIF
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ4htjJlDFsRDhDVomZHkBmLloAMh3z3xIqJZG9OMSPzq9rTCX6OLxZSuBREr2py7zvqQxme9PjMogHSepc6_Ibk7I4IlNho7772tlZfvj6uVeppnf4GvGZ8AEOcjohZXptL2SOzk1__g/s1600/Loading5.GIF
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QvuQ7KIMPYgJ1swcodeTWkHtG1KisWx_9x43W8mXDmFpn7X55G5FvIEzY0raKkZYPUYOUPE3QfWWuIyaPgsfVJL3SC-BJePP5a-JWmhRlTD6-3qPQk5hPBr2gJpaQOgfhGehTAKsncU/s1600/Loading4.GIF
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCspR8nip3a1TTznx4veeKbUR3vhjyc1GtZQU3McIxBQM-cZiSu1IgSKmmu1wovbDLma7_1JoHYOc6GgA1BXTriz3qU-lCTEjkE68Ade7J_9iPwCXv1Avlf5zl3zJP011hP7b9W2oba2s/s1600/Loading3.GIF
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZpu0abpCOycJEp-CucBXnABaNeP7KBjLy5jbeWMY4vxJsen2uOYFjRHKcChABbN_QbaQbUEoNhGulCb5G8Mup5bKyFo5ZpXDlTvbTAZVJyUQactWvoQdyZc1GgnZ4PgTAi8tdgSW7Z3c/s1600/Loading8.GIF
|
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjciK7q8-C4qX5si649RZVqhwkktFsY8dq4Zv-8LDUQOZCP8Hr7Ijt-vbSrXVXIRp6wS4wcAGECZW91RFWsZUelj6QI8rYX_QbhzthhiUxis3QpM-dxNJG08Q8zlf6EFCyLBR4zl1q4oew/s1600/loading9+(1).gif
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh70vwgyIhw8QOoTKFtvod2LyBegphh_PELv-eJ2lWdA4OEEm7-yxdfjgkjc3K6o7F8kPxwaB55_kE83IjqKOXlfjQV-VPlefi8CZj9q0teCX594EPdFyV7eguqlCMS3ipMyJc54ijkYrU/s1600/loading10.gif
|
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqidXFLwwttYwYmf_Y4JY1w6h1u940nkQapj8yZWFjxHYn5-qFTiTe2KAK-XWkiZb3G5JnSn0Tpcun88c7vdl7Asj1HiMxlEhcV1kMe8415JiCDc8S_172NaeLNOsK6Kw6NpXgTSKoGcQ/s1600/Loading9.GIF
|
0 komentar:
Post a Comment