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}}
Also Read :Ẩn xóa hình đầu tiên của bài viết blogspot
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJDuGuNbFMQTXMTeAcc3fsOVUaRzzIEee2VOmEGFW1kph1_4GikDqXNdBoCFrGsJyi-sOflNr1rJAoTlcfTGe_o5svrSkB0VE_CnMMqdX1JUnWMeTUU63nqDFa756wA468VbCZujSA_pok/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:
Also Read :Javascript định dạng số phân cách hàng nghìn<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.