Cara membuat Efek Loading pada blog

Untuk kali ini saya akan memberi turtorial mengenani Cara membuat Efek Loading pada blog. Mungkin agan ingin mempercantik blog dengan memberikan Efek Loading pada blog. Apa sih efek loading pada blog? ya sejenis animasi seperti yang ada di sidebar blog. Tetapi efek yang ini berbeda dengan animasi yang ada di sidebar blog. Efek ini muncul ketika seseorang mengeklik blog atau mengomentari blog anda. Oke kita mulai saja langkah-langkahnya.

1. Buka blog
2. Pilih Template → Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Kemudian Paste code dibawah ini diatas kode ]]</b:skin> atau </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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvoEJO0VhEPslKAbJAshX-ScQAXJ5kYk4xNslWfJgqzOYuoMdGjdqwfWC7EF8fXlKccGJz-phWG-gULFmJXyrGYWSJdMmvkpajSnCtAX1bx8Xqy3gzfhuFPAoAqBA-IB_cLTRy1XQSEQWU/s128-no/loading.GIF&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

NB : untuk kode yang berwarna merah tersebut yang dapat diganti dengan kode dibawah sendiri

5. Cari kode </body>
6. Copy dan Paste kode jQuery 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> 

Anda juga bisa download di Efek Free 
Atau bisa pilih di bawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjowasu9ThpFZ-2dioCKfozxsCGXNBGz_fRswUnL9D16Gzve5ElmtAWVrRCktQFcmUyidvDYeb3axvdKNPXKj2Exu8HbEUa-NT92BEJy21Kf9ltNINbJJ2ZfOeXpcXjTBoLPv1bgtywan0/s128-no/Loading1.GIF

https://lh4.googleusercontent.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-
yn0/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHwFJsOn4AgGl0EryvO8vzhFlLpYcdnFXe41Q5HghodnA0IKyC7JZfht4dD7QxbY4ezDKPi125-XRPSWknF7TVyqOBKx4-QEsvJ8xNmGkZKbGPeJi7870q_GOulmN5byB445JQ9ieHjk/s128-no/Loading3.GIF

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-FxgdRIY5PLRE00BUQk9BvWoGKMb-PCOJ6SP5o9H9FYXnKfZ5Jo3xFglOlyjKthE1h9UKmPwqzfDJnNBTfPFOzYJjoyiqDHRHt3dp4QyqEnEp9gYg5QYtYMpyKeg5nWqkNzaniiYyRfE/w128-h54-no/Loading8.GIF


Sekian artikel cara membuat efek loading pada blog blog jika ada kesuliat silahkan berkomentar dibawah