Khái quát chung
tao-thanh-loading-bar-giong-youtube-cho-blogger
Nếu mấy hôm nay các bạn truy cập vào trang youtube sẽ thấy trang đó có một hiệu ứng loadding cực lạ đó là thanh loading chạy ngang ngay trên đầu của trang đó. Bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng loadding đó vào blog của các bạn.Các bạn chỉ cần làm theo một số bước đơn giản bên dưới.
Trước khi đi vào bài mình giới thiệu qua cái tên, lúc đầu mình tính đặt tên Hướng dẫn tạo thanh tiến trình cho Blog nhưng suy nghĩ lại chưa chắc nhiều bạn đã biết thanh tiến trình nó là cái gì cho nên ghi là progress bar chắc sẽ nhiều người biết hơn.
Hiểu theo cách đơn giản thì progress bar là một đoạn có màu sắc chạy ngang trên đầu giao diện Blog. Ở đây có 2 loại đó là progress bar xuất hiện khi tải trang và khi scroll kéo thanh cuộn xuống.
Với hiệu ứng progress bar khi tải trang sử dụng css kết hợp jquery
Nội dung
B1 Đăng nhập trang quản trị Blogger.
Chọn Chủ đề Template và click chọn Edit HTML
Thêm css phía dưới vào trước thẻ </b:skin>
#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);
}
B2 sử dụng jquery:
Tiếp tục tìm thẻ </body> (Ctrl + F). và dán đoạn code sau vào trên nó:
<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> như vậy là Xong dồi đó, F5 và xem thành quả thôi nào
Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha