Được tạo bởi Blogger.

Giới thiệu bản thân

Tổng số lượt xem trang

Banner 468 x 60

Email Subscribe

Formulir Kontak

Tên

Email *

Thông báo *

Bottom Navi

Pages

Ads (728x90)

Followers

Menu

Top Menu

(HN) - (TP.HCM)
RSS

Thứ Ba, 3 tháng 6, 2014

 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


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


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. 

0 nhận xét:

Đăng nhận xét