Tạo Hiệu Ứng Khi Tải Trang Cho Blogsport

Tạo Hiệu Ứng Khi Tải Trang Cho Blogsport

Xin chào các bạn .Chào mừng các bạn đến với Blog Kiến Thức Seo Như các bạn cũng đã biết thì có rất nhiều thủ thuật hay (những đoạn code ) hay cho blog làm tăng tính thẩm mĩ và sự tương tác giữa người xem với blog .Tùy theo sở thích của mỗi quản trị viên sẽ có sự thay đổi sao cho phù hợp nhất với blog của mình với mong muốn Blog hay Website của mình sẽ có cái nhìn thân thiện nhất với người đọc .Với hiệu Ứng tải trang (Load Page ) mà mình muốn giới thiệu với các bạn ở giưới đây thì Blog hay website của bạn sẽ bắt mắt hơn giảm bớt sự nhàm chán cho người xem .


Xem thêm :

•  Chèn video từ Youtube vào Blog trong khung máy tính kết hợp với Responsive 
• Tạo điểm nhấn riêng biệt cho nhận xét của tác giả 
• Hướng Dẫn tạo sitemap cho blogsport       

Demo cho các bạn (Khi tải trang sẽ xuất hiện xoáy màu đỏ )

Chúng ta hãy cùng bắt đầu thực hiện tạo hiệu ứng tải trang nhé : 

Vào Blog => Mẫu => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl F tìm   thẻ </body>  Sau đó Copy đoạn Code phía dưới đây vào 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/AVvXsEh78VIgwRYUNPyYkmCFYb2GmzN8pywp0fXHM88olUkaLh_c2v7NIK3kAnyvwvO8AB9NYiuu95UfDG8Wl4iU6r5ME62QVtbUtmRSF6Ns5mdSujbT3ah_yYCU5v61T2Wu-dXMJ4HP_hmQxle1/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 lê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
Thay link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh78VIgwRYUNPyYkmCFYb2GmzN8pywp0fXHM88olUkaLh_c2v7NIK3kAnyvwvO8AB9NYiuu95UfDG8Wl4iU6r5ME62QVtbUtmRSF6Ns5mdSujbT3ah_yYCU5v61T2Wu-dXMJ4HP_hmQxle1/s1600/loading.gif    
Bằng link hình ảnh mà bạn thích .

Mình có một số mẫu ảnh cho các bạn .Nếu thích thì các bạn hãy áp dụng nhé : 

Các bạn có thể thay đổi các thông số theo sở thích sao cho phù hợp với blog của các bạn .
Như thể là xong các bạn hãy Test và tận hưởng thành quả nhé .Chúc các bạn thành công .Nếu thấy bài viết hay thì hãy chia sẻ cho mọi người cùng biết nhé .
Có thắc mắc gì hãy để lại comment nhé .