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

Đặng Tiến Sĩ Tác giả:
Xuất bản: Thứ Sáu, 28 tháng 12, 2018 -

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.

Hiệu Ứng Loading, Effect Load Page Jquery, Hiệu ứng tải trang bằng Jquery, Loading.io, Share 100+ ảnh loading trang, Share ảnh tải trang, Tạo Hiệu Ứng Loading Trang Cho Blogspot

Để 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'>
.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é.

Lời kết


Nếu các bạn không biết cách F12 để lấy link ảnh, thì lên mạng xem nhé :v Chúc các bạn thành công!

Thích
Bình luận

Bài Viết Có Thể Xem

THÔNG BÁO

Biên tập nội dung: Đặng Tiến Sĩ
Sĩ Ben IT Blogger giữ bản quyền nội dung trên website này
Chỉ được phát hành lại nội dung khi có sự đồng ý của chủ sở hữu
Mọi thư từ góp ý vui lòng gửi về địa chỉ dangtiensi.vn@gmail.com

Đóng Liên hệ