Tạo hiệu ứng tải trang cho Blogger

Tạo hiệu ứng tải trang cho Blogger | 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. Đặc biệt hiệu ứng này sẽ giúp ích rất nhiều cho những blog/website tốc độ tải trang chậm, giấu đi sự chậm trễ khi tải trang. Đồng thời cũng tăng tính chuyên nghiệp cho blog của các bạn. Đoạn script đơn giản này sẽ làm tối và hình ảnh chờ sẽ xuất hiện 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

Đầu tiên các bạn đăng nhập vào Blogger > Mẫu > Chỉnh sửa HTML

Sau đó thêm đoạn code dưới đây 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('Dán link ảnh bạn muốn xuất hiện khi tải trang vào đây') 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>

Cuối cùng lưu mẫu để hoàn thành.

Thêm hiệu ứng tải trang cho Blogger như vậy là bạn đã có hiệu ứng tải trang cho blog của mình. Bạn có thể tự tùy chỉnh lại đoạn CSS ở trong đoạn code trên để thay đổi hiệu ứng tải trang cho phù hợp với website của bạn.

Chúc các bạn thành công!

Hiệu ứng tải trang cho Blogger

Related Post

2 comments