Hiện nay hiệu ứng loadding được rất nhiều blogger vì nó giúp blog của bạn đỡ nhàm chán hơn khi chuyển đổi qua lại giữa các trang trên blog, ngoài ra nó còn giúp blog bạn tạo được phong cách riêng so với các blog khác. Nếu áp dụng một cách hợp lý blog của bạn sẽ trở nên chuyên nghiệp hơn và mượt mà hơn.
Bài viết này mình sẽ hướng dẫn các bạn tạo hiệu ứng tải trang sử dụng hình ảnh dộng kết hợp với một file javascripts có dung lượng rất nhỏ nên bạn khỏi lo làm chậm tốc độ trang của bạn.
Bạn có thể xem demo ở blog bên dưới:
» XEM DEMO
☼ Cách thêm hiệu ứng loadding sử dụng cho blogger
1- Đăng nhập vào Blog2- Vào Mẫu => Bấm chọn Chỉnh sửa HTML
3- Dán đoạn code bên dưới trước thẻ </body>
<style> #abt-page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2XffIdWwuAv0dVvXzzFghO_FL6NLWEtJBpX_8mE6znp4HX-XVfCOahxlLFhxAbNpdoggeaXE9TorShx8W9nlgkfx99x-qJRs-nf-6HgVZwARHq9aKN7-Q-K8AAX6pLEaM38_NYFYGdoY/s1600/loadding+google++.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="abt-page-loader">Loading...</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>Tùy chỉnh:
- Bạn có thể thay link ảnh màu cam thành link ảnh của bạn. Hoặc chọn một số hình ảnh loadding mà mình cung cấp ở cuối bài viết này nha:
- top: 0; Là vị trí của ảnh loadding so với lề trên.
- right: 0; Là vị trí của ảnh loadding so với lề phải.
- bottom: 0; Là vị trí của ảnh loadding so với lề dưới.
- left: 0; Là vị trí của ảnh loadding so với lề trái.
☼ Một số hình ảnh loadding đẹp:
- Loadding của facebook:- Loadding của Google +:
Ngoài ra bạn có thể tham khảo thêm bài viết tạo ảnh loadđing Tại đây
Nhận xét
em xin đóng góp thêm 2 ảnh loading đep:
Trả lờiXóaảnh 1: http://3.bp.blogspot.com/-uJpxHlL7dII/Uq_cSFE2OyI/AAAAAAAAA8I/CUP2LO1b7WM/s1600/loading.gif
ảnh 2:http://1.bp.blogspot.com/-aOpRxf9qZDc/Uq_cQ1yJtbI/AAAAAAAAA8A/QO6lEZjt9gE/s1600/loading+2.gif
2 cái ảnh này nhìn không đẹp bằng cái ảnh mẫu :D
Xóalấy cái ảnh cùa faceboook ế :v
Trả lờiXóaẢnh của facebook đây nè :) Loadding Facebook
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóalàm sao để nó phủ toàn màn hình
Trả lờiXóa