Hướng dẫn tạo hiệu ứng chờ tải trang đẹp cho Blogspot
Mục lục bài viết
Những lợi ích khi dùng hiệu ứng tải trang cho Blogspot
Mạng lại sự hấp dẫn trực quan
Hiệu ứng tải trang tạo thêm nét tinh tế cho blog của bạn. Nó tạo ra giao diện đẹp mắt và hiện đại, có thể thu hút khán giả ngay từ khi họ đến trang web của bạn.Tăng tương tác người dùng
Bằng cách kết hợp hiệu ứng tải trang, bạn có thể thu hút khách truy cập trong thời gian tải ngắn. Điều này có thể ngăn họ thoát khỏi trang web của bạn và khuyến khích họ khám phá nội dung của bạn sâu hơn.Thể hiện tính chuyên nghiệp
Việc triển khai hiệu ứng tải trang chứng tỏ rằng bạn chú ý đến các chi tiết và quan tâm đến việc cung cấp trải nghiệm duyệt web liền mạch cho khán giả của mình. Nó mang lại cho blog của bạn một cảm giác chuyên nghiệp và bóng bẩy hơn.Góp phần xây dựng thương hiệu
Hiệu ứng tải trang có thể được tùy chỉnh để phù hợp với thẩm mỹ thương hiệu của bạn, từ đó củng cố nhận diện thương hiệu của bạn và làm cho blog của bạn trở nên dễ nhớ hơn đối với khách truy cập.Cách tạo hiệu ứng tải trang cho Blogspot
Bước 1: Để bắt đầu, các bạn vào trang quản trị Blogger, chọn Chủ đề, và chọn Chỉnh sửa HTMLLưu ý blog phải sử dụng thư viện jQuery, bạn cần kiểm tra xem template của mình đã có thư viện này chưa. Nếu chưa có thì hãy thêm nó vào trong thẻ <head>...</head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
Bước 2: Copy đoạn code bên dưới và dán vào trước thẻ đóng </body><style type='text/css'>
.ahiblog_loading {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('https://i.giphy.com/ZO9b1ntYVJmjZlsWlm.webp') center no-repeat #fff;
}
</style>
<div class='ahiblog_loading'/>
<script>//<![CDATA[
$(window).on('load',function(){
$('.ahiblog_loading').fadeOut(1000);
})
//]]></script>
Bước 3: Sau đó lưu lại và mở trang blog để kiểm tra hiệu ứng.Bạn có thể thay thế hình ảnh hiệu ứng ở đoạn code trên bằng một hình ảnh bạn yêu thích (có thể tải về từ internet hoặc tự tạo hình ảnh phù hợp bằng các công cụ thiết kế hình ảnh như Photoshop,...)
Đăng nhận xét