Tạo hiệu ứng loading đợi tải trang cho blog tuyệt đẹp và chuyên nghiệp

Tiếp tục với series hiệu ứng loading cho blog, hôm nay mình sẽ giới thiệu đến các bạn một hiệu ứng chờ tải trang, hiệu ứng khá đơn giản chỉ 2 dòng chữ và màu nền được làm mờ. Thủ thuật do chính mình viết nên khá ngắn gọn và nhẹ. Thủ thuật này cũng góp phần khá nhiều giúp blog/website của bạn chuyên nghiệp hơn bội lần! Cùng xem và thực hiện nhé.

Bước 1: Đăng nhập Blogger ➜ Mẫu ➜ Chỉnh sửa HTML.
Bước 2: Chèn vào trên thẻ ]]></b:skin> trong template.

.spinner{background:rgba(255,255,255,.98);z-index:99999;position: fixed; width: 100%; top: 0; height: 100%;-webkit-user-select:none;cursor:wait}
.text_loading {color: #55579e; letter-spacing: 2px; text-transform: uppercase; font-size: 50px; font-weight: 100; width: 100%; text-align: center; height: 100%; align-items: center; position: absolute; top: 35%; left: 0; font-family: "Roboto Slab",serif}
.text_loading span {font-size:20px;font-weight:400}

Bước 3: Tiếp tục chèn đoạn code sau vào sau thẻ <body> trong template.

<div class='spinner'><div class='text_loading'>Vui lòng chờ giây lát<br/><span>Please wait a moment</span></div></div>
<script type='text/javascript'>
$(window).load(function () {
setTimeout(function () {
$(".spinner").fadeOut("slow");
setTimeout(function () {
$("#loader").fadeOut("slow")
}, 0)
}, 0)
});
</script>

Bước 4: Chèn đoạn sau vào sau thẻ <head> trong template.
Do mình sử dụng font Roboto Slab nên phải thêm đoạn code này, nếu bạn không muốn sử dụng font Roboto Slab này thì không cần phải thực hiện bước này.

<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700' rel='stylesheet'/>

Cuối cùng lưu template lại và ra trang chủ xem thôi!

Bình luận Blogger

MỘT SỐ LƯU Ý KHI BÌNH LUẬN:
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !