HIỆU ỨNG LOADING ĐẸP CHO BLOGGER SỬ DỤNG CSS VÀ JAVASCRIPT

1 hiệu ứng loading đẹp cho Blogger vừa giúp người đọc đỡ nhàm chán mỗi lúc đợi tải trang vừa giúp tạo 1 phong cách rất riêng cho blog của bạn. Trong bài viết này, mình xin giới thiệu 1 hiệu ứng loading đẹp cho Blogger sử dụng CSS và Javascript

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

ANIMATED PAGE LOADING EFFECT FOR BLOGGER – HIỆU ỨNG LOADING ĐẸP CHO BLOGGER

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/AVvXsEhpNs2GnKDhbX64Bzcgmr4LfdCxBccJE4L0FxrQ97fJUd69q-FRhaDjQTrx9N5bkALz4S-P72CBo-4HjRsLAITbj4AbAPRthUXBcxiDzoiI6HRGdibS6uukPx7WV4X8_z1XI2nFhq3kJuA/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é