Tạo hiệu ứng Loading khi chuyển trang cực đẹp cho Blogger

Đây là thủ thuật sử dụng CSS và Javascript để chèn hiệu ứng loading vào blog khi bạn click vào link để chuyển sang một trang khác.

Demo

Các bước thực hiện

Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML
Bước 2: Chèn đoạn CSS sau vào trước thẻ ]]></b:skin> trong template

#blogtn-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('https://1.bp.blogspot.com/-8hAqdq_eklU/V7Mk-3Qi1DI/AAAAAAAAAWw/UpoDXSwZlz4nG7KDaEP9CHGYrcQvQj_pACLcB/s1600/LOADING%2B%2528blogtruongnguyen.blogspot.com%2529.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}

Bước 3: Chèn đoạn javascript sau vào trước thẻ </body> trong template

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="blogtn-loader"></div>');
$(window).on("beforeunload", function() {
$('#blogtn-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Bước 4: Lưu mẫu.

Chúc các bạn thành công với thủ thuật này!

aaaaaaaaaa

Xin chào các bạn mình là một người có niềm đam mê mãnh liệt với công việc thiết kế Website, đặc biệt với Blogger. Bắt đầu tìm hiểu và tự học hỏi trên mạng từ năm 2012, và hiện tại dành 100% thời gian cho công việc trên Internet.

Thành Kent Blog

Tạo hiệu ứng Loading khi chuyển trang cực đẹp cho Blogger

Các bước thực hiện