Hướng dẫn tạo thanh Loading Bar giống Youtube cho Blogger

Cộng tác viên tháng 8 18, 2017 #Blogger

 

- Đăng nhập trang quản trị Blogger.
- Chọn menu Template và click chọn Edit HTML

- Thêm css trước thẻ </b:skin>

Copy

#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);
}

- Tiếp tục tìm thẻ  </body> (Ctrl + F). và dán đoạn code sau vào trên nó:

Copy

<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>

- Xong, F5 và xem thành quả thôi nào :)

0 bình luận

Chia sẻ