Tạo hiệu ứng Loading đẹp cho blogger, blogspot

Để tạo hiệu ứng Loading đẹp cho blogger, blogspot các bạn cần làm theo hướng dẫn sau. Vô cùng đơn giản luôn. Vì hiệu ứng loading này được làm từ CSS và Javascript nên nó sẽ không ảnh hưởng quá nhiều đến tốc độ tải trang blog

1. Đăng nhập vào Blog

2. Vào Bố cục (Layout)

3. Chọn Thêm Tiện ích (Add Widget)

4. Thêm đoạn code sau vào trên thẻ </body>

[css]

<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url(‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoM43CtW58KsDCOefsLQO9cuBqMKWJ6L9ZaPS-nXfLPDCQqgE8_KPOraCZsVgIhElBfO32Utlm9nukXGH8x-ukxDSxFLgKD59P-8PGOgJoHa9rTiNcc7wc8WDxB4oH43elXFPbv4FMPF8/s200/load6.gif’) no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type=’text/javascript’>
//<![CDATA[
$(document.body).append(‘<div id="abt-page-loader">Loading…</div>’);
$(window).on("beforeunload", function() {
// … Show the Animation .fadeIn()
$(‘#abt-page-loader’).fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>[/css]

Save template lại. Giờ hãy vào lại blog để kiểm tra hiệu ứng loading hoạt động ra sao nhé