Thêm trạng thái màn hình chờ loading cho blogspot

Màn hình chờ (loading) dành cho blog là một trạng thái bạn có thể tự tạo cho blog. Khi có khách ghé thăm trang của bạn đầu tiên thay vì họ nhìn thấy và tải từng modul blog của bạn thì khách sẽ thấy một ảnh động chờ đợi được bạn đặt sẵn từ trước, trong khi thiết bị của khách vẫn tải trang của bạn.

Sau khi trang của bạn được tải hết 100% thì màn hình này sẽ nhẹ nhàng biến mất nhường chỗ cho nội dung trang của bạn. Quá chuyên nghiệp phải không?


Có thể bạn sẽ cần: Cách xóa nhãn vĩnh viễn khỏi Blogspot - xóa label, thẻ tag vĩnh viễn







Màn hình chờ này nếu được sử dụng đúng cách sẽ giúp dấu nhẹm đi thời gian tải trang. Làm cho khách ghé thăm trang của bạn không bị nhàm chán, giảm tỉ lệ thoát khỏi trang khi  chờ đợi tải. 

Nếu sử dụng những hình ảnh phù hợp với chủ đề blog của bạn sẽ gây ấn tượng tốt với khách truy cập họ sẽ nhớ tới trang của bạn và sẽ thường xuyên quay lại.


Nhiều trang blog hướng dẫn khác chỉ cho các bạn nhiều code, phải dò dẫm nhiều nhưng với thủ thuật thêm hiệu ứng chờ loading cho blogspot này, bạn sẽ chỉ phải thêm một đoạn code ngắn  và... thế là xong. Không phải điều chỉnh gì nhiều nhưng tác dụng thì cực thiết thực và to lớn



Hướng dẫn thêm trạng thái màn hình chờ loading cho blogspot:


Vào blog của bạn => chủ đề => chỉnh sửa HTML 

=> Nhấn chuột vào những code HTML sau đó nhấn tổ hợp phím Ctrl + F để tìm kiếm

=> Ô tìm kiếm xuất hiện bạn gõ vào đó <body>  để tìm thẻ mở đầu <body>

=> Dán đoạn code này xuống dưới thẻ <body>

<style type='text/css'>

.siben {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 10000000;

background: url('https://media.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.gif') center no-repeat #fff;

}

</style>

<div class='siben'></div>

<script>//<![CDATA[

$(window).on('load',function(){

$('.siben').fadeOut(1000);

})

//]]></script>


=>Thay đoạn màu đỏ chính là đường link đến ảnh động mà bạn ưng ý và muốn nó xuất hiện tại trạng thái màn hình chờ loading

=> Nhấn lưu code lại và tận hưởng


chú ý, một số template thẻ body ở dạng  <body expr:class='data:blog.pageType' > bạn cần dán nó ngay dưới dấu > như thế này:

<body expr:class='data:blog.pageType' >

code Thêm trạng thái màn hình chờ loading cho blogspot

còn nếu nó chỉ là <body> thì dễ rồi bạn chỉ cần dán như thế này: 


<body>

code Thêm trạng thái màn hình chờ loading cho blogspot


Một số hình gif loading dành cho bạn tham khảo tại đây 


------------

Thực hiện: delam.top


Delam.top - Kênh DIY - Chuyên trang DIY - mẹo, hướng dẫn nhanh và dễ dàng nhất.

Post a Comment

Hãy lịch sự và văn minh khi đưa ra ý kiến bạn nhé ♡

Previous Post Next Post