Khái quát chung
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.
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:
<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