Hôm nay, 30/11/2015 ngày
cuối cùng của tháng chia tay một tháng không may mắn _ để bắt đầu một tháng mới
!!!
Mọi quản trị viện của một
Blog/Website đều muốn Blog/Website của họ có một cái nhìn đẹp nhất có thể trong
mắt của độc giả. Hiệu ứng tải trang (Loading
Page) sẽ làm tăng sự tăng sự bắt mắt và giảm bớt sự nhàm chán cho
Blog/Website của Bạn. Đặt biệt hiệu ứng này chỉ phù hợp cho những Blog/Website Load chậm, thì hiệu ứng
này sẽ “thể hiện” một cách rõ ràng, đồng thời giấu đi sự chậm trễ khi Load trang.
Đọc thêm:
Mình nói thêm một tí về
hiệu ứng tải trang, có 2 cách để tạo hiệu ứng này: Một hiệu ứng này hoàn toàn
được tạo bởi từ một đoạn CSS (tùy biến
hơi khó) và Hai hiệu ứng này thể hiện một
đoạn text hay một hình ảnh (tùy biến một các dễ dàng). Ở bài viết này mình
hướng dẫn các các tạo hiệu ứng tải trang
bằng cách sử dụng một ảnh động.
Khi các bạn bấm chuyển
trang thì hiệu ứng sẽ xuất hiện như hình minh họa ở phía bên dưới và đây là
DEMO cho các bạn xem trước.
☼ Giờ bắt đầu thủ thuật cùng
Windows2it.
Vào Blog
=> Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl
+ F và tìm đến thẻ </body>. Sau đó dán đoạn mã
Code sau lên phía trên thẻ </body> và Lưu mẫu.
<style> #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/AVvXsEgrzz3L08VcO5zJoVWckRoTfyKhMAw5dS4btFTeup-FcgzMq_zpCGjaf29G39LuyaSKTQTK-VcoyiXTxYPPVWAAyDYjhVXY-3OpGdCdRTpITNwEpDG9KaUi-ETaN56QKpbtQBixb4uqHdO5/s1600/loading.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="page-loader">Loading...</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>
☼ Tùy chỉnh
·
background:#000: Màu nền khi tải trang.
·
Các thông số .fadeIn(1000) (thời gian hiệu ứng đậm dần và xuất hiện) _ .delay(6000) (thời gian hiệu ứng duy trì) _ .fadeOut(1000) (thời gian hiệu ứng mở dần và biến mất) (đó là các
thông số chuẩn nhưng cần thiết Bạn có thể thay đổi nó để phù hợp với
Blog/Website của Bạn).
·
Thay đổi link ảnh màu xanh thành link ảnh
bạn mong muốn.
Nếu
bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những
bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. JJJ
Backlink: Download tài liệu miễn phí
Quá trình cài đặt gặp vấn đề gì cứ
để lại Comment !
cho em hỏi sao em ko tìm dc "< /body >" mà chỉ tìm dc body
Trả lờiXóathẻ đóng body mà tìm không ra thì bó tay cho bạn .... Nó nằm ở dòng thứ 2 từ dưới tính lên đó bạn !!
Xóabạn ơi mình mới tạo 1 blog mới toanh mà nó bị lỗi k hiển thị bình luận G+ Bạn check giúp mình đc k Cảm ơn trước ạ
Trả lờiXóađc thì inbox fb cho mình nhé https://www.facebook.com/Do.6666
bạn ơi lưu sao :v?
Trả lờiXóa