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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
Đâ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.

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://media.giphy.com/media/i3pHUtmHiLd28/giphy.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!
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.