Tạo Hiệu Ứng Load Trang Cho Blogger - Blogspot

 Đôi khi mình dạo quanh các Blog chuyên về tạp chí hay bài báo thì thấy nó load khá chậm. Cũng dễ hiểu bởi nó load rất nhiều ảnh rồi các Widget khác nhau, hiệu ứng từng cái làm nó rất chậm, tuy nhiên tớ thấy khá hay khi nó khắc phục bằng cách tạo hiệu ứng loading Trang rất đẹp. Và hôm nay mình sẽ hướng dẫn các bạn làm điều đó.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao   
• Lời Kết

Mục Đích

• Tạo hiệu ứng loading trang đẹp cho Blogspot
• Khắc phục tạm thời lỗi Blg load chậm
• Với hiệu ứng metro khá phù hơp, đẹp mắt
• Nhanh gọn với 1 đoạn code ngắn

Thực Hiện

1. Đầu tiên các bạn tại file .gif sau về máy, bạn sẽ có file loading trang.

Demo
click to view

Download
click to begin
143KB .zip

2. Sau đó các bạn upload lên host nào đó lâu dài như mediafire, google drive, one drive, hoặc upload thằng lên Blogspot cũng được

Chú ý: nếu bạn upload lên blog bạn cần thay đổi link ảnh của nó từ  dạng [1-9].blogspot.com thành lh[1-3].googleusercontent.com

3. Các bạn vào Blogger -> Mẫu -> Chỉnh Sửa HTML, sau đó dán đoạn code html sau vào trước thẻ đóng </body> 

HTML<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/AVvXsEioDBP6x7zIbhXlnjT2nJR2EvfyUjVkUtIfaTAI43THcsop3_9mb1RP5DNFzUw0idhzxxHouGYS2mAfuZiv2m2cvT5RWRLP73futj8wv8OdOq8P0VJgWRjHZVVlPOZsS9lr4XCWxXul_OEx/s1600/Loading+%25283%2529.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>

Chú ý: các bạn thay link màu đỏ: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDBP6x7zIbhXlnjT2nJR2EvfyUjVkUtIfaTAI43THcsop3_9mb1RP5DNFzUw0idhzxxHouGYS2mAfuZiv2m2cvT5RWRLP73futj8wv8OdOq8P0VJgWRjHZVVlPOZsS9lr4XCWxXul_OEx/s1600/Loading+%25283%2529.gif thành link ảnh gif mà bạn up lên host hồi nãy thế là xong.

Nâng Cao

• 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).

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Hiệu Ứng Load Trang Cho Blogger - Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.