Hiệu ứng tải trang cho Blogger

Mọi blogger mọi quản trị web đều muốn website của họ có một cái nhìn đẹp nhất có thể. Cũng vì lý do đó tất cả mọi người luôn tìm tòi sáng tạo, tìm ra những thứ mới để tăng sự bắt mắt và giảm bớt sự nhàm chán cho blog mình, hiệu ứng nhỏ sau đây là một trong kết quả của sự tìm tòi và sáng tạo đó, đoạn script đơn giản này sẽ làm tối và hình ảnh chờ khi blog của bạn đang trong quá trình tải đến người dùng.

Hiệu ứng tải trang cho Blogger

Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML 

Thêm đoạn mã phía dưới vào trước thẻ </body> 

<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/AVvXsEgUcDjVk9ZMZMOFQHtV4XBn73CcbiCoDDuYBoYDeGXylGgqu94GRQhrOgVp43u3GF0zdtqdknbD55SzIp_JTb60kJiLf37kvIl1fMVLLPpmPZteZJRBwSB3AKmSuG-vNZfho2bJ0cvbXNU/s200/load6.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>

Nhìn qua đây thì nhiều người sẽ nghĩ, tại sao nó đơn giản thế. Mình cũng có thằng bạn nó cũng nhìn qua nó bảo "làm gì mà dễ dữ vậy". Xin thưa với các bạn nó chính xác rồi, hàm js này nó có công việc là xác định nếu trình duyệt đang tải dữ liệu từ website thì nó sẽ hiện lên đoạn ảnh tải mà chúng ta thêm vào, không cần phải nghĩ cao siêu để có một hiệu ứng đẹp đâu ạ.

Cuồi cùng chỉ cần save lại, thế là bạn đã có hiệu ứng tải trang bắt mắt cho blog của mình. Bạn có thể tự tùy chỉnh lại đoạn css ở trong đoạn mã trên để thay đổi hiệu ứng tải trang cho phù hợp với website của bạn, v.d. thay đổi màu nền và ảnh tải trang.

Nếu vẫn còn phân vân trong vấn đề chèn như thế nào bạn có thể xem qua video hướng dẫn phía dưới: