Judul : Cara Membuat Efek Animasi Page Loading Di Blogger
link : Cara Membuat Efek Animasi Page Loading Di Blogger
Cara Membuat Efek Animasi Page Loading Di Blogger
Lyezha Komputer - Kali ini saya mencoba berbagi Cara Membuat Efek Animasi Page Loading di Blog . Page loading adalah sebuah fitur untuk menampilkan efek loading ketika perpindahan page / halaman. 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 terlalu 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 daya tarik dan nilai plus pada Blog anda, karena dapat mempercantik dan menarik untuk dilihat.
Dalam membuat Page Loading kita perlu mencari code </head>, Simpan kode di bawah ini sebelum </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader"></div>'); $(window).on("beforeunload", function() { $('#page-loader').fadeIn(1000).delay(4000).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:9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nQCn3-zWKGUBtXyy3HbpI4-a1cvLi2jyeJS680Bzt1SxI3sllm9jGD5KAFDFrfTGh-zTQWzXLbpoLCN_Rw9RVr5m7txO7zcZu7HQpI-GeovADx_7_jhtMcLh66Ew1H9nAZKdcfBmhUs/s1600/Loading3.GIF') no-repeat 50% 50%; color:white; 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 sendi anda dapat menguploudnya lalu anda bisa terapkan. Setelah semuanya anda terapkan maka simpan template dan lihat hasilnya. |
Efek Animasi Loading Page .Gif
Inilah adalah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAF3OWX0lJOXUNrIvVezsfIUp-NpA37vR3PG_6_B5p5hjOQQYX0oUbPtvZZDJfDIcRZC5ff9MYC4Rs5yG7NWTL_BaAePp7r_1NU65DiJo2aAR0S1lqTwVFfhYAnj2ingKPx1a-oakXzeI/s1600/loading1+(1).gif |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh829w7jtiBS5iZFVZrDIAAQYQUSv99B0bBB22Z0CujhpDOJz3MsccqkSwlwai2o18ZmQDtjE1hwSp1sJPArKjP3YC4mj8JNS-sclbolYms48s1cqMI3v355XPQMRhgVWDhtSh1ekCDys8/s1600/Loading1.GIF |
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG8p7Wc-P0UPGzMLeT68qNuTev3INy7v_L1jYx-8hXvPPz6ZI-VF5qakZDlwG53nmKsCW3IZvirmuSurLf_cJ-1DVOwzfI4ioxgcpzL80GtMG7IKa6w-e-la7WEvpOp5kTaIfUVnTAh0c/s1600/loading2+(1).gif |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWL0CASK00sAn52ahvOX9KlCQiBD18JTlzkDU4W9K5yQ0mkQ_3jh6KGXKld0ANEAsA19ZnkQtiOoI36gdvRguNGlPGPK-9XmN7azBIuWWqruDjyQKoFygq3g8h9yw6SRSZ7V1HQ3GSHMs/s1600/Loading2.GIF |
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl4wJaW2586TM4nDF1CL1U_2V58fdykzLhm1hnssiIufY9x3-8yAsGXPNqZoLReg-rCcBQFYQkhIH6njyhHfoa5s9_BbLGZynufp0wsFtTv3RzBuP5lZiJfbWtCvelKTiblorJ9JIrg-E/s1600/loading3+(1).gif |
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBVq91hNxE_es6HhspGZvKnjAZAqC0TsYNl8PhkjhjOZaSFXBd3UgRxzlEex8pg9Dtuuw6qfzNYhBI1bAPd_xIlZWpTAOv3LjKl9xp7QzXY83xgI8uBacD8Sikl4OUgWb9a11Wuxs05t8/s1600/loading7+(1).gif |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0xnegURd9nxalYDUJ9uqbMIhDn7DzmD6JaWCnPWpgJckPF_Cj5kJJzPcTeVWOFiDx6vX6TXUP2SKakAUtlfVaANQ70o0cGDBSDpqT7_aY_hAkWrLUoJDqXztDZjExZNFtSZZ2qihHpU/s1600/Loading6.GIF |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0uaDsKcut_T4RzoFf4E-MWnio7VZ3yoWeP1DSzpsz2uDQFihxQqeZeWRpvAaTZY6SQkGGI9GFTPDaZA3MlbUPWd13lv5ESa7WBNwmHXzjMfNgVFPZOSdcYum03odtdNJbXEEU6n63Pk/s1600/Loading5.GIF |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjarV18nU4AoX7gbulz0d1-tuavcyVCvML4NwbJQBKXucb2zWPO64MUz8uDik1MhOVod0ZO0zI283E_zbViO9H5NEvi_wEA72nPBni2bjAV4YITjxRd9n_9WqqN_DlVYZVAP1IT8FQxlbw/s1600/Loading4.GIF |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nQCn3-zWKGUBtXyy3HbpI4-a1cvLi2jyeJS680Bzt1SxI3sllm9jGD5KAFDFrfTGh-zTQWzXLbpoLCN_Rw9RVr5m7txO7zcZu7HQpI-GeovADx_7_jhtMcLh66Ew1H9nAZKdcfBmhUs/s1600/Loading3.GIF |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4-iUHaDH78EI2iwCis-DR0kPiuxOHjn6Y3OPLnEMTw3J8ClN6jnzGWABnfnvO9u1Knef0ggYGzbHw9SK7I_DxKoYJZKaHW909gDoYyfZpc5Xwh9BUIgkFauqIPeOq5IVjl9z6q0kbzQc/s1600/Loading8.GIF |
.gif)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjux0mghRFVXs7zWb2dy4xeWchogBGbRvwC28XDWa-sMcokTPj_D7c0gCukwrLzyE25kIQjde5TEi9ljnNGCejM-Jk8DYRzRQO6Ukxj5OHNy8hcupkV4fOivZ4rd8c6tNSm46iezr9gizo/s1600/loading9+(1).gif |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguc1ZVTTr5NJKo4BromwZXCeNt1hWgFI30Sg-teScPwqt6YFxXpFrRqR4MSdpoWCvjmOF9kienFGihmjkOTvnJMH63VVWQAxkFrP6erwosZjPy8kuMNYhtJQ7kPTEuezIQmShIpv_lsFY/s1600/loading10.gif |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmgnBtz1cH2fNtC_BrsUpqUmXeCZwaxbFyW4DJxkaOlE_zy1M-Ta0prgm0y7Ql2J5tNr27r9EOshTjZe2vI33EQXihFi2GLTDtWW_wvyqss7blCUSsBdvFDYKgnJIbrcc1B6ZKdL6nSQ/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.