Cara membuat efek loading di blog

Kali ini saya akan membagikan cara membuat loading biar blog kamu lebih keren

Cara Membuat Efek Loading di Blog Keren 
1. Pertama pastinya masuk dulu ke blogger anda
2. Lalu kemudian masuk ke menu template ~>> Edit HTML
3. Cari kode ]]></b:skin> atau </style> ~>> gunakan CTRL+F untuk cepat mencari nya
4. Setelah itu Copy kode css di bawah ini, lalu paste diatas kode ]]</b:skin> atau di atas kode </style>




/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(&#39;http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

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

 

  

Catatan : kode yang berwarna merah di atas adalah gambar loadingnya

- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.

- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan di bawah ini.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari google, silahkan bisa Anda pilih dibawah ini atau anda bisa langsung cari saja di google dengan kata kunci Loading atau apalah sesuka sobat saja, tapi menurut saya udah bagusan yang saya pilih di bawah ini :

http://originalpeople.org/wp-content/plugins/no-spam-at-all/img/loading.gif

http://tributi.regione.calabria.it/sigetri-portlet/resources/img/loading.gif

 https://www.alumni.polimi.it/img/loading.gif

http://www.funclipcard.com/Images/framely.gif

http://fc03.deviantart.net/fs71/f/2013/003/6/9/partart_loading_boredoom_6_by_g2k2007-d5q8zyt.gif

http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvkFYHM_gCDuePWzxRvWEoTXfi49uVVpGiCEIqzF20RjiDR2vuhCxCTvMFbvl8saZvSWegAPfBvvHK3QUhfjprwPMQXgwv1TEhCAg4WLDOyEanSdqqeneh4QY6lHNgxqEt3dbBaemm7fo/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiCuGRPeUBx9cGEcbwirFPBDoafl0YjrKEQ9JQsmGnOSQCoKUdenErAo2dSlnHOEu_vhyphenhyphenOeu9T-MzahH1LnCh9FcdLJQKXZTt4lX-OK9d-BZYhbSAj0dv-WrhdTJBPbh8D1Qmf2SG0S70/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJX_6TECcU177lEaOythXotjpDnGRfDXOuFLU_8jF4plVmqjY_U5xrecmqaDSFDjOMLq5u9OwPV0REsLoPNhst0V-VsP7NZkKbslrYc3ZpcI92cCKulo0KGGDrumzmDGFLL8HquCc6gI/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP-sr1dXnfx2Vo0Y9dn5pCMpuvXSfhMcgCh3FQt6xFXukMoUc4KbZ__VPWpkDEfFDYSoqt9I43kaChVCORzHudNaN5lHvp9o-a33HCJ-xSFehz8qbdDtxcI0r27lVCu50_WopY3ipjlVU/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uZ612zH1jW1SeNSZA0jogPbo1434QRcjTZXYrv6327RFFX7EwbzSqNb7k2eEb0_u1tYIVfNgvGsMexbQ6CSEjoXZLBnNYhOzKnTU3aJJtwQ7jtPRldT-7hFiUhCs6Zm7BMdees5In_g/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDYl62c2XYAfQmPxG5R5JoPBeG5kthWjawBdKnwwXrWDMte2kDKCejGyKKprF3UvsEwmEnyzlgTZOcjFKdWm30nJuZ8JCuMVHIy8in7l_63b6aSPF80WUQHP48D-esiVHEXpxW6eBTIXk/s128-no/Loading6.GIF

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVfDzfo_ZL-9jiT_23F-mRKe8LnbTFIgGkBfy01rcAhvRyttwwdLjVFcSYtsS5HcpB0r9dYA26yHc_0rGgD3Yp28DVuRVwvZfTiolOg7_YuQxwTWSKZOlVeuXAqLWjP73sSBnf9T3YvFI/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc7cZnFWWNdvASSN9PTWPOavloOiKv6_tpfA3cmafyrtfCRs4WWn40wNzvFKCKQ9lbf19sERk2HCyT6XxllnXk98Z9CrGBRIW2oB9ZGFrCi7x3gNl8ab-HovAj99S-pByrDbw31cAlWg/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIQGFh3S_vuPFJc4rDfYJSF5jNCUxg1GVICFv3gmcg2bBIKKVF8kxV3xs9zRI1JMnG0cUpMmoJg56wEw7DgeW2e2STK0IwGoiWXWpcVT0JcDwGOqm0kAP3DJmSRR7XWFLDaIqrf2rKMG0/s128-no/Loading9.GIF

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

demikian cara membuat efek loading di blog