Chào các bạn, hôm nay mình sẽ share cho các bạn một hiệu ứng Loading đẹp mắt cho Blogspot. Mình thấy nó cũng khá chất nên nếu các bạn thích có thể áp dụng ngay vào Blog của mình nhé.! Nào, chúng ta cùng bắt đầu thôi..


CÁC BƯỚC THỰC HIỆN :

Bước 1: Đặt đoạn CSS này vào trước thẻ ]]></b:skin>
#preloader {
position: fixed;
z-index: 1800;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #202020;
}
.no-js #preloader,
.oldie #preloader {
display: none
}
#loader {
position: absolute;
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
top: 50%;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
Bước 2: Đặt đoạn js này vào trước thẻ </head>
<script type='text/javascript'>
 /*<![CDATA[*/
$(window).bind("load", function () {
    jQuery("#loader").fadeOut("slow");
    jQuery("#preloader").delay(0).fadeOut();
});
  /*]]>*/
</script>
Bước 3: Đặt đoạn HTML này vào sau thẻ <body> hoặc Ctrl + F và tìm <body rồi dán vào sau thẻ đó nhé.
<!--preloader start-->
<b:if cond='data:blog.pageType == "index"'>
<div id='preloader'>
<div id='loader'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
</div>
</b:if>
<!--preloader end-->

LỜI KẾT :

Không có gì để tổng kết, chúc các bạn thành công. Có thắc mắc gì hãy để lại comment phía dưới để được hỗ trợ nhé. See ya!
CTV : Tính Getter
- 27 bình luận
CHUYÊN MỤC

TẤT CẢ BÌNH LUẬN (27)

  1. Ahihi cmt đầu ngại vờ cờ

    ReplyDelete
  2. Chả có gì đặc sắp ngoài cái thumb :>

    ReplyDelete
  3. Reup bài viết ! này nhé, hahaha
    ctv blogthuthuatit.com chúc bạn một ngày làm việc vui vẻ.

    ReplyDelete
  4. Ngộ Nghĩnh DC. DC ∈ N* | DC ⋮ 3

    ReplyDelete

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 (xem nội quy).

Không nói lời thiếu văn hóa, không quảng cáo thông qua khung bình luận.

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Để bình luận một đoạn code, hãy mã hóa code trước nhé!