Hiệu ứng Load trang màu đỏ giống youtube cho Blogspot

Tweet

 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ạn có thể tích hợp hiệu ứng cho các trang báo điện tử, các trang shop cho tới các trang Video, Phim ảnh






Cách thực hiện khá đơn giản, bạn chỉ cần chèn đoạn code sau trên </body>

<style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-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ạn có thể tùy chỉnh để đổi màu bằng cách thêm mã màu vào màu xanh in đậm ở trên 
Chúc bạn thành công và đừng quên nhấn Like để tác giả chia sẻ thêm nhiều tính năng.