Hướng dẫn thêm hiệu ứng Loading cho blogspot

Xin chào các bạn, chào mừng các bạn trở lại với Star Nhân Blog , đã lâu rồi mình không chia sẻ thủ thuật Facebook, hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng loading mà mình đã lấy được ở blog của Trần Thanh Bình. Code này mình khuyên các blog có tốc độ load khiêm tốn không nên sử dụng vì nếu tốc độ load chậm thì nó chạy không có điểm dừng chứ giỡn =)).

Một số hình ảnh Democlick để xem ảnh lớn

Cách thêm hiệu ứng

- Cho đoạn css sau vào trước thẻ đóng </b:skin> :
/* 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 #4267b2;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 #4267b2;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:#4267b2}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#4267b2}}
- Cho đoạn code sau vào sau thẻ mở <body>:
<!-- Loader -->
<div id='preloader'>
<div class='spinner'>
<ul class='loading reversed'>
<li/>
<li/>
<li/>
</ul>
</div>
</div>
- Chèn Javascript trước </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script> 
 Vậy là Star Nhân IT đã chia sẻ cho các bạn một hiệu ứng để làm đẹp cho blog của mình, chúc các bạn có một ngày vui vẻ !!!!

Nhận xét

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3