Lấy logo làm hiệu ứng Preload cho blogspot

Hướng dẫn cách Lấy logo làm hiệu ứng Preload cho blogspot, Tạo hiệu ứng chờ tải trang (Preload) trong Blogger bằng logo, giúp bạn quảng cáo thương hiệu tới khách hàng truy cập.

Demo trực tiếp ở bài này


Cách làm đơn giả như sau:

Bước 1: Thêm CSS trong thẻ <b:skin>


.align-items-center{-ms-flex-align:center!important;align-items:center!important}
.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}
.d-flex{display:-ms-flexbox!important;display:flex!important}
.preloader{background-color:#f7f7f7;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;-webkit-transition:.6s;-o-transition:.6s;transition:.6s;margin:0 auto}
.preloader .preloader-circle{width:100px;height:100px;position:relative;border-style:solid;border-width:3px;border-top-color:#fc3f00;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;z-index:10;border-radius:50%;-webkit-box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);background-color:#ffffff;-webkit-animation:zoom 2000ms infinite ease;animation:zoom 2000ms infinite ease;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-circle2{border-top-color:#0078ff}
.preloader .preloader-img{position:absolute;top:50%;z-index:200;left:0;right:0;margin:0 auto;text-align:center;display:inline-block;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);padding-top:6px;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-img img{max-width:55px}
.preloader .pere-text strong{font-weight:800;color:#dca73a;text-transform:uppercase}
@-webkit-keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}
@keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}

Bước 2: Thêm HTML dưới thẻ <body>


<div id="preloader-active">
  <div class="preloader d-flex align-items-center justify-content-center">
    <div class="preloader-inner position-relative">
      <div class="preloader-circle"></div>
      <div class="preloader-img pere-text">
        <img src="https://1.bp.blogspot.com/-ZpUhMtgACDo/X-YFV3-9MJI/AAAAAAAASd4/ls40ND9i1sgjgE5DmRxku31_9xmLaEJWwCLcBGAsYHQ/s0/logo.png" alt="logo" />
      </div>
    </div>
  </div>
</div>

Bước 3: Thêm JS trước thẻ </body>


<script>
  $(window).on('load', function() {
    $('#preloader-active').delay(450).fadeOut('slow');
    $('body').delay(450).css({
      'overflow': 'visible'
    });
  });
</script>

Hoặc với đoạn JS có nhiều cách để xử lý, các bạn có thể viết như sau:


<script>
  $(window).bind("load", function() {
    $('#preloader-active').delay(1000).fadeOut(500);
  })
</script>


Lưu ý blog phải sử dụng thư viện jQuery


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

Như vậy là bạn đã Lấy logo làm hiệu ứng Preload cho blogspot một cách đơn giản.


Chúc các bạn có một mùa Giáng Sinh an lành!

Nhận xét

×