Hướng Dẫn Tạo Hiệu Ứng Loading Bar Của Youtube Cho Blogspot/Blogger

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger
2. Chọn: Bố Cục > Thêm Tiện Ích > HTML/JavaScript, rồi copy đoạn code bên dưới và dán (paste) 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>

CHÚC CÁC BẠN  THÀNH CÔNG!

Author : Admin

Share this

Related Posts