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

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger
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é

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger Reviewed by Trương Ngọc Tuấn on 4/02/2016 04:15:00 SA Rating: 5

1 nhận xét:

✩ Viết tiếng Việt có dấu
✩ Không spam
✩ Không chửi tục, nói bậy
✩ Không quảng cáo thông qua khung Comment.

Adblock Detected

Xin Chào!

Có vẻ bạn đang sử dụng tiện ích chặng quảng cáo

Vui lòng vô hiệu hóa tiện ích chặn quảng cáo để ủng hộ blog

Cảm ơn

10
All Rights Reserved by Star Tuấn Blog | Thủ thuật, Ảnh bìa chất © 2015 - 2017
Powered By Blogger, Designed by Star Tuấn - Facebook
Được tạo bởi Blogger.