Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, June 29, 2014

Bài viết hưỡng dẫn “Tạo Loading Bar giống Youtube cho Blogger/ WordPress” Hẳn là khi xem video youtube bạn có thể để ý thanh loading màu đỏ ở phía trên cùng. Hiệu ứng loading này rất đẹp. Mang một phong cách cho blog của bạn. Dưới đây là demo thanh bar này



Youtube Loading Bar
Mất một số thời gian để tìm hiểu cái thanh loading của youtube thì mình đã hoàn thành. Sau đây mình sẽ hưỡng dẫn thêm hiệu ứng này vào Blog.

Hưỡng dẫn Tạo Loading Bar giống Youtube cho WordPress

  1. Bạn vui lòng hoàn thành các bước sau
  2. Đăng nhập vào Admin Dashboard Wordpress
  3. Bấm vào “Appearance” chon “Editor”
  4. Truy cập file header.php và thêm đoạn code bên dưới vào trước thẻ </head>

Hưỡng dẫn Tạo Loading Bar giống Youtube cho Blogger

Các bạn cũng làm giống tương tự như phần hưỡng dẫn WordPress kia thôi.
Bước 1: Đăng nhập vào Dashboard Blogger
Bước 2: Chọn Bố Cục» Thêm Tiện Ích »  HTML rồi tống đoạn code này vào:

<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>
Xong rồi, bạn thử ra ngoài và click vào một link xem hiệu ứng này có hoạt động không!. Nhớ like nhé

0 comments:

Post a Comment

Popular Posts