Tạo hiệu ứng loading giống Youtube cho Blogspot

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

Tạo hiệu ứng loading giống Youtube cho Blogspot

Share:
Thủ thuật thực ra không quan trọng và cũng không cần thiết cho 1 Website, Bài viết ngày hôm nay nhằm mục đích mang đến cho bạn đọc thêm 1 cách nhìn nhận về khả năng của Blogspot cũng làm được các chức năng như các Website lớn, và mang đến cho bạn vọc Blogspot thêm những trải nghiệm tinh chỉnh Blogspot của mình thêm phong phú và đa dạng. Hiệu ứng load trang giống Youtube rất lạ và phong cách.
Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Copy và paste đoạn code dưới đây vào sau thẻ <body> trong template.
<style>
#progress {
position: fixed;
z-index: 999;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #55579e;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>
Bước 3: Lưu template.
Bạn có thể thay đổi màu sắc theo ý thích bằng cách thay đổi mã màu được in đậm bên trên.
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é.