Tạo hiệu ứng Loading cùng 4 thầy trò đường tăng

 Hí xin chào mọi người nha, nay thì mình sẽ làm một trang loading cho blogger. Code này thì nó giúp cho website của chúng ta kéo dài thêm thời gian để giúp cho web của chúng ta tải kịp nội dung. 

Tạo hiệu ứng Loading cùng 4 thầy trò đường tăng

Đây là một trang loading với hiệu ứng 4 thầy trò đường tăng ực kì chất chơi lun nha. Bây giờ chúng ta cùng bắt đầu làm thôi nha....

Bước 1: vào trang quản trị blogger --> chủ đề --> chỉnh sửa HTML 

Bước 2: tìm cho mình thẻ </body> và dán đoạn code phía dưới vào phía trên thẻ </body> 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
.main-load { height:100vh; width:100vw; -webkit-background-size:cover; background-size:cover; overflow:hidden; position:relative; }
.main-load ul { height:100%; width:3920px; position:absolute; top:0; left:0; animation:dong 50s linear infinite; }

@keyframes dong {
    0% { left:0; } 100% { left:1920px; } 
} 
.main-load ul li { height:100%; width:100%; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Ju9JNQ58x50LuN3zCAVQ2EmWa9m19v76iPncStdNLMy1NtwHAgfSNPN_9VphCTuAiitNTSbnPxkfP0mN2NtJ0aG22XRxNs33TLJ3GF6nLVHYp3BKy1v0AUHF2c1Uuibcc1FYciXvKYQ/s1600/2.jpg); float:left; margin-left:-2000px; }
.wk { z-index:999; width:200px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdN5NqMwce0dKN_KK__BVNPxeum5ggOhpe3OA7j3t4IEieqDX9Xo_xlnby4s-j9T2xXZCK4n9FunHfQYqEEIAyzAyzDuzXlOg_fsCd9r4XfHqWH0pIprjEVBYZ1kT5tcZq9mORlZUcl5Y/s1600/west_01_3ca39fe.png) 0 0 no-repeat; position:absolute; top:55%; left:20%; animation:wkzou 1s steps(8) infinite; }

@keyframes wkzou {
    to { background-position:-1600px 0; } 
} 
.bj { z-index:999; width:200px; height:180px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCX5lNcjpBqXnjwiMUlACqdZUESvzl8g974O-m_KnFbXE1DyG0zccoJPn3CyjuYsgopCpDnzeOy8tq_3Aa4Kygd2Pn07Pw5APsp38gEJVj6k__yPnDjyG-J8kSFmUleC_Q3OcLU0zZj0/s1600/west_02_47bad19.png) 0 0 no-repeat; position:absolute; top:55%; left:35%; animation:bjzou 1s steps(8) infinite; }

@keyframes bjzou {
    to { background-position:-1600px 0; } 
} 
.ts { z-index:999; width:170px; height:240px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPzl-jFOcMFutbYKPgsopHWmfHjjtBadz6Ta36g2DLDhrYvFxEG1tzpooLcQzdvf55W3g0PcCvIDn35AKPN5csLTQPyFHLop4KvQXvobi7MXk-X8OiDrxwvZLxhEag0CatTIaUz6AyFhA/s1600/west_03_f962447.png) 0 0 no-repeat; position:absolute; top:50%; left:50%; animation:tszou 1s steps(8) infinite; }

@keyframes tszou {
    to { background-position:-1360px 0; } 
} 
.ss { z-index:999; width:210px; height:200px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha0RXCCqYq3NWnJnNh-6bpxsdLa4WDTTTu8A7tdaDhurlLkKfNDYPfEK-11o47godvVzh4QeXHfwHPgGdYNhN9dpy3nCKKhjwvq2lzKSuexofdftDmNmgwR77Nqq58He2cnbb_2Z5kdoY/s3200/west_04_6516d80.png) 0 0 no-repeat; position:absolute; top:57%; left:62%; animation:sszou 1s steps(8) infinite; }

@keyframes sszou {
    to { background-position:-1680px 0; } 
} 
.loader{top:0; left:0
background:#3fdcc5; z-index:9992; opacity:1; pointer-events:none; position:fixed; display:-webkit-flex; display:-ms-flexbox; display:flex; width:100vw; height:100vh; min-height:100%; -webkit-animation:fade--out 1s 6s forwards; -moz-animation:fade--out 1s 6s forwards; -o-animation:fade--out 1s 6s forwards; -ms-animation:fade--out 1s 6s forwards; animation:fade--out 1s 6s forwards}

@-webkit-keyframes fade--out {
    0% { z-index:3; opacity:1; } 100% { z-index:-1; display:none; opacity:0; } 
}
@keyframes fade--out {
    0% { z-index:3; opacity:1; } 100% { z-index:-1; display:none; opacity:0; } 
}  
</style>
<div class='loader'><div class='wk'/>
<div class='bj'/>
<div class='ts'/>
<div class='ss'/>
<div class='main-load'>
    <ul>
        <li/>
        <li/>
    </ul>
</div></div></b:if>