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!

aaaaaaaaaa

Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Chia Sẽ

Thành Kent Blog

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