Hiệu ứng tải trang cho Blogger

          Đa số các Blogger đều muốn trang blog của mình thật bắt mắt, thu hút nhiều người ghé trang của bạn. Vì vậy hôm nay mình sẽ share cho các bạn Hiệu ứng tải trang cho blog, mong các bạn ủng hộ.

Demo Click here

• Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML

 Thêm đoạn mã phía dưới vào trước thẻ </body>

<style>
#page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-iRNAMN70XRpA_rJ9l9GEgYYAitFEkwtxsbRVTalPfS9-jqbad9tvPwjyCGgpy1GowR0SURlu9japRFbqlDzCRA81iL-Cg1LLNXxbaS8W7sVLAzdQ-hZM0w1dly4CicaQNVqWH7qANR8/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

        Cuối cùng chỉ cần save lại, thế là bạn đã có hiệu ứng tải trang bắt mắt cho blog của mình. Bạn có thể tự tùy chỉnh lại đoạn css ở trong đoạn mã trên để thay đổi hiệu ứng tải trang cho phù hợp với website của bạn, v.d. thay đổi màu nền và ảnh tải trang.