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. 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.
Để 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é.
Nguồn Code Và Bài Viết Bởi Sỹ Ben IT
