Chào các bạn, để tạo thêm phần sống động cũng như chuyên nghiệp cho website/blog của mình thì trong hôm nay mình sẽ giới thiệu đến các bạn cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản, ai cũng làm được.
Mọi Admin đều muốn Blog/Website của họ có một cái nhìn đẹp nhất trong mắt quý bạn đọc. Với hiệu ứng tải trang (Loading) cuốn hút sẽ làm tăng sự bắt mắt và giảm bớt sự nhàm chán cho Blog/Website của bạn. Với những Blogspot/Website load châm, hiệu ứng Loading sẽ thể hiện một cách rõ ràng hơn, đồng thời giấu đi sự chậm trễ của Blog/Website đó. Còn đối với những Blog/Website load nhanh, code thể hiện sự chuyên nghiệp trong mắt độc giả!
Các bước thực hiện
Bước 1: Vào quản lý blogspot > Chủ đề > Chỉnh sửa HTML
Bước 2:Chèn đoạn code sau vào bên dưới thẻ <body> (nếu các bạn không tìm ra <body> thì hãy tìm <body nhé)
<style type='text/css'>
.siben {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('Link ảnh loading') center no-repeat #fff;
}
</style>
<div class='siben'></div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.siben').fadeOut(1000);
})
//]]></script>
Thay Link ảnh loading bằng link hình ảnh của bạn, có thể là SVG hoặc GIF.
1000: thời gian kết thúc loading, các bạn có thể tăng giảm để phù hợp với lối hiện thị bạn mong muốn.
Bước 3: Lưu template.
Một số mẫu ảnh loading đẹp
https://dl.dropboxusercontent.com/s/6b7ctab58kg5bfp/025001-Bricks.svg
https://dl.dropboxusercontent.com/s/bl1ms1rpp5hddqe/025001-Coin.svg
https://dl.dropboxusercontent.com/s/4la9ff7obhkzl2y/025001-Crystal.svg
https://dl.dropboxusercontent.com/s/m6pwom5j6i19htm/025001-curve-bars.svg
https://dl.dropboxusercontent.com/s/7luj0iaoi85x41y/025001-Default.svg
https://dl.dropboxusercontent.com/s/lav5hgx7fz92kqp/025001-Earth.svg
https://dl.dropboxusercontent.com/s/sfk3444zgm9733r/025001-Eclipse.svg
https://dl.dropboxusercontent.com/s/ryg70y1g3ymkcyk/025001-Heart.svg
https://dl.dropboxusercontent.com/s/88zu35amrntxvl2/025001-Lava-Lamp.svg
https://dl.dropboxusercontent.com/s/ibk0p0i0nuilsfe/025001-Ripple.svg
https://dl.dropboxusercontent.com/s/d5gkgpoxkuaj5n4/025001-Rolling.svg
https://dl.dropboxusercontent.com/s/f0rwyrg2zatii59/025001-Spinner.svg
https://dl.dropboxusercontent.com/s/v8c71bd4jc3fp0i/025001-Squaricle.svg
Lời kết
Bên trên là cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản. Nếu có gì thắc mắc hay không hiểu bạn có thể để lại comment bên dưới, mình sẽ giải đáp sớm nhất có thể.
Chúc các bạn thành công!
Đõa test :V ngọt
Trả lờiXóaĐã test, quá chất
Trả lờiXóaĐẹp lắm anh!
Trả lờiXóaEm nghĩ anh để Theme cũ mơi đẹp. Đúng phong cách Sờ Ta Cường chứ :))
Trả lờiXóahay à nha :'>
Trả lờiXóaquá đỉnh đẹp nữa chứ <3
Trả lờiXóaTheme đẹp ghê á anh!
Trả lờiXóaHay
Trả lờiXóaTuyệt vời
Trả lờiXóaĐẹp đó a
Trả lờiXóakhông có url để đổi gif hã anh cường
Trả lờiXóahay quá
Trả lờiXóaVip
Trả lờiXóa