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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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 đoạn CSS này 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 () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 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!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.