Tạo hiệu ứng Loading cho blog khi truy cập vào blogspot

Demo

Chào các bạn!
Nếu bạn để ý khi bạn truy cập vào một trang blog nào đó bạn sẽ thấy có một hiệu ứng Loading đang chạy để đo khoảng thời gian đợi trang load xong trông khá đẹp và chuyên nghiệp. Hôm nãy mình sẽ hướng dẫn các bạn chèn hiệu ứng load trang như vậy.
Bước 1: Đăng nhập vào blogger rồi chọn Mẫu
Bước 2: Chọn chỉnh sửa mẫu ở chế độ HTML

Chỉnh sửa mẫu ở chế độ HTML

Bước 3: Dán đoạn mã sau lên trước (trên) thẻ ]]></b:skin> hoặc trước thẻ </style>

/* CSS Loader Keren by indzign.blogspot.com */
#loadhalaman{position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none}
.loadball{background-color:transparent;border:5px solid #00a3ff;border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow:0 0 35px #00a3ff;width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear}
.loadball-2{background-color:transparent;border:5px solid #00a3ff;border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow:0 0 15px #00a3ff;width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-moz-transform:rotate(145deg);opacity:1}
100%{-moz-transform:rotate(-320deg);opacity:0}
}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px#00a3ff}
50%{-webkit-transform:rotate(145deg);opacity:1}
100%{-webkit-transform:rotate(-320deg);opacity:0}
}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}

Bước 4: Chèn đoạn mã Jquery sau lên trước (trên) thẻ đóng </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
  var siteURL = "http://" + top.location.host.toString();
  var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
  $internalLinks.click(function() {
    $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
  });
  $('#loadhalaman').click(function() {
    $(this).hide();
  });
</script>

Bước 5: Lưu mẫu và thưởng thức!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait