Customer relationship management (CRM) software has come a long way in the 15 or so years since I started using it. Today’s CRMs are incredibly versatile, and because of strong competition, have remained a relatively...
Tạo thanh Loading Bar giống Youtube cho Blogger
Khái quát chung
Nếu mấy hôm nay các bạn truy cập vào trang youtube sẽ thấy trang đó có một hiệu ứng loadding cực lạ đó là thanh loading chạy ngang ngay trên đầu của trang đó. Bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng loadding đó vào blog của các bạn.
Các bạn chỉ cần làm theo một số bước đơn giản bên dưới.
Trước khi đi vào bài mình giới thiệu qua cái tên, lúc đầu mình tính đặt tên Hướng dẫn tạo thanh tiến trình cho Blog nhưng suy nghĩ lại chưa chắc nhiều bạn đã biết thanh tiến trình nó là cái gì cho nên ghi là progress bar chắc sẽ nhiều người biết hơn.
Hiểu theo cách đơn giản thì progress bar là một đoạn có màu sắc chạy ngang trên đầu giao diện Blog. Ở đây có 2 loại đó là progress bar xuất hiện khi tải trang và khi scroll kéo thanh cuộn xuống.
Nội dung
B1 Đăng nhập trang quản trị Blogger.
Chọn Chủ đề Template và click chọn Edit HTML
Thêm css phía dưới vào trước thẻ </b:skin>
#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); }
B2 sử dụng jquery:
<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>
như vậy là Xong dồi đó, F5 và xem thành quả thôi nào
Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha
Related Posts
Hướng Dẫn Mod Full Skin Liên Quân Hot Pick Mới Nhất Sau Cập Nhật 11/11
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod skin airi bích hải và raz muay thái mới nhất
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod full skin liên quân new sau cập nhật mới nhất
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Skin Raz Muay Thái Sau Cập Nhật + Fix Lỗi iOS + Android | Hz Mod
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod skin raz muay thái mới nhất new
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Camera Siêu Xa Liên Quân Mùa 20 iOS + Android | Hz Mod
05:07 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Mod Full Skin Hot Pick Liên Quân v5 iOS + Android | Hz Mod
05:06 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Hướng dẫn mod 40 skin new sắp ra mắt trong liên quân
05:06 06/11/2022 App, Blogger, Xã hội
Download IOS Download Android Hướng dẫn mod skin lubo robot mới nhất Mô tả: Đây là một dạng thay đổi file trực tiếp không sử dụng qua bất kỳ ứng dụng nào nên hoàn...
Recent Posts
- Top 10 best HR management software 2023
- Top 5 best production management software for businesses 2023
- What is CRM? CRM software benefits, processes and features
- What is customer insight? How to identify customer insights
- Sales Process on CRM: Sales Process Management Solution
- What is Sales Automation (SFA)? Is SFA software effective?
- CRM system: How to build and potential
- What is a CRM solution? Comprehensive CRM solution for businesses
- 5 Best Criminal Attorneys in Phoenix
- How to choose top law firms in Gold Coast, Australia
- 5 reasons you might lose your car accident lawsuit: Learn what to do
- The importance of hiring an experienced personal injury law firm
- 5 situations that call for hiring a commercial litigation lawyer
- Hiring a car accident lawyer: A complete guide
- Tips on hiring and working with lawyers
Nguyễn Đức Hoàng
10 điểm
Lê Anh Đức
à được
Tống Xuân Trung
lấy 9.5 đ hôy nha :3
Tống Xuân Trung
kkk oke a luon :3
Gia Huy
để hôm nào thử luôn kkk
Tống Xuân Trung
okee bro luon kkk
Nguyễn Quang Linh
ý sời đẹp luôn
Nguyễn Thái Phong
Rate 5☆
Tống Xuân Trung
kkk oke a :3
Tống Xuân Trung
vip cà chua :3
Gia Huy
vjp, cho 5 sao
Tống Xuân Trung
okee luon