Tạo Hiệu Ứng Loading Trang Cho Blogspot

Oleh Phạm Hoàng Nam

Pada tháng 12 28, 2018 tháng 1 16, 2019

Effect Load Page Jquery (Hiệu ứng tải trang bằng Jquery) nhằm làm cho trang web thêm bắt mắt hơn, khi trang tải chậm thay vì hiện thị những lỗi và lỗ hỏng trắng trên trang web, thì để che hết mọi thứ đó chúng ta nên sử dụng hiệu ứng load trang.
Xin chào mọi người, thì hôm nay mình sẽ chia sẻ cách tạo hiệu ứng load trang cho blogspot và những tuỳ biến cực dễ dàng.

Để làm được thì các bạn theo dõi bài viết này nhé.

Các bước thực hiện

Truy cập vào Blogger chọn Chủ đề sau đó chọn Chỉnh sửa HTML, rồi thêm đoạn code dưới đây sau thẻ <body> nhé.

<style type='text/css'>



Bạn có thể thích những bài đăng này
Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot
Tuỳ Chỉnh Định Dạng Thời Gian Bằng F12 Cho Blogspot

.siben {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    background: url('https://loading.io/spinners/curve-bars/index.curved-bar-spinner.svg') center no-repeat #fff;
}
</style>
<div class='siben'></div>
<script>//<![CDATA[
$(window).on('load',function(){





  $('.siben').fadeOut(1000);
})
//]]></script>

Sau khi dán xong và lưu chủ đề lại rồi f5 trang để xem thành quả nhé.

Cách sử dụng

Trong đoạn css có link ảnh động đuôi .svg mình có thể thay thế bằng gif củng được nhé. Nhưng ảnh phải có kích thước tầm 150x150 trở xuống thôi.

.siben {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    background: url('link ảnh loading cần hiện thị') center no-repeat #fff;
}

Ở đây mình sẽ chia sẻ cho 1 trang có tầm 100+ ảnh đuôi .svg free. Bạn có thể dùng F12 để lấy link ảnh và dùng cho web của mình nhé.

Xem ngay