Tạo Hiệu ứng Tải (Loading) Trang Cho Blogspot

Có thể bạn quan tâm

Liên hệ
Dịch vụ
Sitemap
Thơ - Tâm sự
Kiếm tiền online

Home › thu-thuat-blogspot Tạo hiệu ứng tải (Loading) trang cho Blogspot Hoàng Nhân Khôi 23:19 4 Comments thu-thuat-blogspot SHARE Tweet Edit

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: ● Tạo nút Button hiệu ứng nhảy cho Blogspot ● Tạo hiệu ứng bài đăng phổ biến (Popular Posts) cho Blogspot ● 7 hiệu ứng bay sinh động của twitter cho Blogspot 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. DEMO hiệu ứng tải (Loading) trang bằng hình ảnh

DEMO hiệu ứng tải (Loading) trang bằng hình ảnh

☼ 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 !

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@! Theo dõi tôi trên:

THỦ THUẬT LIÊN QUAN

Blogger Comment Facebook Comment

4 nhận xét:

Cao Nhật Anlúc 04:13 12 tháng 10, 2016
cho em hỏi sao em ko tìm dc "< /body >" mà chỉ tìm dc body
Trả lờiXóaTrả lời
1. Hoàng Nhân Khôilúc 05:15 12 tháng 10, 2016
  thẻ đó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óaTrả lời
Unknownlúc 02:12 17 tháng 12, 2016
bạn ơi mình mới tạo 1 blog mới toanh mà nó bị lỗi k hiển thị bình luận G+ Bạn check giúp mình đc k Cảm ơn trước ạđc thì inbox fb cho mình nhé https://www.facebook.com/Do.6666
Trả lờiXóaTrả lời
Vịt Officiallúc 04:57 31 tháng 12, 2017
bạn ơi lưu sao :v?
Trả lờiXóaTrả lời