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

Cộng tác viên 14:15 #Code HTML #HTML - CSS #html javascript #THỦ THUẬT #Thủ thuật 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:
[post_ad]

<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é #Code HTML #HTML - CSS #html javascript #THỦ THUẬT #Thủ thuật Blogger

0 bình luận

Chia sẻ