Tổng hợp các hiệu ứng load trang bằng CSS cho blogspot

Chào các bạn!
Hiệu ứng load trang bằng CSS từ lâu được các blogger sử dụng cho blog, thay cho hiệu ứng nhàm chán khi bạn chờ đợi khi load trang, nó cũng tạo cho blog một phong cách chuyên nghiệp và thể hiện trình độ của chủ nhân blog.
Hôm nay mình sẽ hướng dẫn các bạn cách chèn hiệu ứng load trang bằng CSS đã được tổng hợp trong 1 file duy nhất, bài viết này mình tham khảo tại Askwhitloud.com các bạn tải về và thay Link là xong.

Demo

Bước 1: Đăng nhập vào blogger và chọn Mẫu
Bước 2: Chọn chỉnh sửa Mẫu ở chế độ HTML
Bước 3: Tải file này xuống và giải nén rồi UP file lên Host, mỗi file ta lấy 1 hiệu ứng, thích file nào up file đó, không phức tạp lắm đâu, chỉ là thay link ảnh của file đó vào đường dẫn được tô màu đỏ trong đoạn code ở bước 4.
Bước 4: Coppy đoạn mã sau và dán nó lên trước thẻ đóng  </body>

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQwfcFSp6ednaoFKqZ-nzGl3uBQtJKmgIHXDIudwuI2uuV3cOUzXsi882M7OGEdxCD9p8QrTnPMboQ6Wq3aDeGaAUYX8iozHx5F1xCPSy-yMPgQZAO0RISMzNl6ga0EgAkDuEWch5UGVGt/s1600/Preloader_1.gif') no-repeat 50% 50%;  
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

Các bạn thay Link file trong bước 3 vào url được tô màu đỏ nha! Nó là cái này https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQwfcFSp6ednaoFKqZ-nzGl3uBQtJKmgIHXDIudwuI2uuV3cOUzXsi882M7OGEdxCD9p8QrTnPMboQ6Wq3aDeGaAUYX8iozHx5F1xCPSy-yMPgQZAO0RISMzNl6ga0EgAkDuEWch5UGVGt/s1600/Preloader_1.gif
Bước 5: Lưu template và thưởng thức!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait