Cara mengubah animasi loading pada blog

Posted by : Unknown

Hai, bagaimana kabar anda hari ini? Disini saya akan meng-share bagaimana cara mengganti “loading” pada blog.

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/AVvXsEgO4uok-Pu44H7WNLiQLWbfDMjq0gUsigfvbgCcDs-4SoAACUhMz64m1YPC9FafOHUbsRP6E95oWY1hOU-l90lWzEdYf0L2qF088p93islsOk8XuMZfyQe92FJw5iNq8E0ndAbwt5FuVReV/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.

//<![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/AVvXsEiRRv1etF7podgGwGPqhPkqZYz1y1Ic-DdXw35231GyayL9CyxNGgsp-_FfN0GOPdquCewXoGF-WSHrg3cvbgeUPmzwPb1L1VsuXNJ5Uz_YcNOkQ4JF2MHMq4Doo6WWeBmV4tAkeDjMU2M/s128-no/Loading2.GIF

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

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz0X4GuO3atYbo51eiECBQRtdcSSquAVq6BK5b4aMBdfnYV5_s6wKWBxKyXZd6haTsq2_erVlT8RVYwGQuB_Ydt5xX8wV9A0ZG50Jcs7flTyS1_7VEawqso42WvhluGh-fAAL1FZV-zVM/w128-h54-no/Loading8.GIF

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs6loh-if6Pu8wzTw3SJYApalraoupMjoHVmNiIa1Ch0b0wP7NbM4QZtsZyXoR6mvb9KIDtOOTaKdAFbCGLscKhUY2tAFPrUUZuoMUV_xe2np5srj48YKpN4U-I8f9sQGHlQ_4HIg9GEo/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZoewN5UTBeSeZ1QP1AeCHE0Xwo_jMdhghXUBcUaF4D6O0g3UaGlZu8mU12iVohajcZQy-MjoewEmUns_SxqtEQqIjKYf1liAvJw7p9ZM8zhK4-JYYxhXjk_ahpzS98Gxn6HhCM5Ya3eE/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.

thanks ya yang sudah berkunjung, selamat mencoba dan selamat bertemu lagi di artikel artikel selanjutnya!