Có nhiều cách để làm đẹp giao diện của blog, một trong số đó là cài đặt hiệu ứng tải trước hay thường gọi là hiệu ứng tải trang blogspot.
 |
| Tạo hiệu ứng tải trang Blogspot chuyên nghiệp. |
Hiệu ứng tải sẽ hoạt động khi trang blog được tải. Và nó mang lại ấn tượng như thể blog chúng ta đang truy cập mất rất nhiều thời gian để tải. Hiệu ứng tải này cài đặt trên blog sẽ biến mất sau khi trang được tải hoàn toàn.
Việc cài đặt hiệu ứng tải trên các trang blogspot sẽ không ảnh hưởng đến tốc độ tải blog của các bạn, điều này là do các hiệu ứng được sử dụng hoàn toàn sử dụng CSS và SVG mà không chèn hình ảnh.
Có một số tùy chọn hiệu ứng tải mà mình sẽ chia sẻ lần này, với từng mã CSS và HTML. Vì vậy bạn có thể lựa chọn theo ý muốn của mình. Được rồi, hãy đi thẳng vào vấn đề:
Cài đặt hiệu ứng tải trên trang blogspot
Đầu tiên, các bạn cài Js này vào template nhưng nếu phiên bản JQuery trong mẫu của bạn giống với phiên bản JQuery bên dưới thì bạn không cần thay đổi nó. Nếu khác, vui lòng thay thế bằng Thư viện JQuery Phiên bản 1.7.1 bên dưới:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Các bước tiếp theo:
- Vẫn trong Bảng điều khiển Blogger
- Chọn Chủ đề -> Chỉnh sửa HTML
- Chèn code sau trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>
Bước tiếp theo là thêm mã HTML bên dưới ngay bên dưới thẻ mở <body>
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>
Sau đó, Lưu và xem kết quả
Đối với các tùy chọn hiệu ứng tải khác, bạn có thể tự quyết định xem mình thích hiệu ứng tải nào. Mình để sẵn một số tùy chọn hiệu ứng tải thú vị bên dưới, cài đặt như trên, bạn chỉ cần thay đổi HTML và CSS để thay thế hoặc sử dụng các hiệu ứng tải khác. Không cần phải thêm lại mã JQuery.
Hiệu ứng tải trước Dấu chấm đảo ngược
Code HTML
<div id='preloader'>
<div class='spinner'>
<ul class='loading reversed'>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}}
</style>
Hiệu ứng tải trước Cầu vòng
Code HTML
<div id='preloader'>
<div id='container' class='spinner'>
<div id='loader'></div>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)}
#loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}
@keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}
</style>
Hiệu ứng tải trước Spinner Ball
Code HTML
<div id='preloader'>
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
</style>
Hiệu ứng tải trước của Google Chrome
Code HTML
<div id='preloader'>
<div class='spinner'>
<div class='loader tri'></div>
<div class='loader tri2'></div>
<div class='loader tri3'></div>
<div class='loader tri4'></div>
<div class='loader circ'></div>
<div class='loader circ2'></div>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2}
.tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1}
.tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1}
.tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2}
.circ{border:30px solid rgba(255,255,255,0.1)}
.circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
</style>
Hiệu ứng tải trước Vòng tròn
Code HTML
<div id='preloader'>
<div id='loader'>
<span class='spinner'></span>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>
Hiệu ứng tải trước Dấu chấm di chuyển
Code HTML
<div id='preloader'>
<div class='spinner'>
<div class='loader'>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
<div class='moving-dot'></div>
</div>
</div>
</div>
Code CSS
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
</style>
Nếu bạn không thích hiệu ứng tải mà mình đã chia sẻ ở trên. Vui lòng tự mình truy cập trang web của nhà cung cấp tải tại icons8.com/cssload
Đó là cách tạo hiệu ứng tải thú vị trên blogspot. Hy vọng nó có thể được áp dụng cho blog của bạn và cảm ơn bạn đã ghé thăm.
![[Telegram] Hướng Dẫn Các Lệnh Của Bot ROSE Dành Cho Group Cần Thiết Nhất](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpV1wZFX-k2MtuJ8xGu1CU3MPuAR4xVPs5rRkqOYjTZv1HZ8fFt0g0uqmThu58p8612vQWczqIDOsyQYVW6K9I7MiUrlHv2BTgSYHR3hf8b9g3goKgsT8vr92IhPAcnP6P5pOMDgcpsw/w100/IMG_20210327_212540_745.jpg)
![[Telegram] Hướng Dẫn Bot Rose Xóa Link Spam Kèm Theo Hình Phạt kick Khỏi Group](https://blogger.googleusercontent.com/img/a/AVvXsEgsIBU6NKKbnpmzJAFrOUvghg0owtdOXe22317AiPLt5338TvwLc87n2yto_2LDxtlHiIhhEFnDCjUl1mxXpL9O-PNx3adyEkHDOWrY6RTtsw04O6Z_9o600S8D2JuKIYkiI5EV_kX1YYxeCARJE0YBFeD3HDrS_250ljrNTlIYPGBOWOaw0K2X2A=w100)
