Trong bài viết hôm nay, Startuanit Hướng dẫn Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger vô cùng thú vị, đẹp mắt và sống động.
Hướng dẫn Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger
Demo ngay trên bài viết này. Các bạn thử refresh hoặc chuyển hướng đến link khác xem :))
Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới
CSS
Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin> trong template
#st-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://lh5.googleusercontent.com/-IUnJX0hVrAI/VrnDlK6YRbI/AAAAAAAACec/WFR3ZbHrvWg/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Bạn có thể thay thế http://lh5.googleusercontent.com/-IUnJX0hVrAI/VrnDlK6YRbI/AAAAAAAACec/WFR3ZbHrvWg/s1600/loading.gif thành link ảnh muốn hiện khi chuyển trang
Script
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="st-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#st-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Lưu lại và xem kết quả. Chúc các bạn thành công #st-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#0C0C0C url(‘http://lh5.googleusercontent.com/-IUnJX0hVrAI/VrnDlK6YRbI/AAAAAAAACec/WFR3ZbHrvWg/s1600/loading.gif’) no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } //
Xêm thêm: Chia sẻ Code Trang trí Tết cho blog/website năm 2020
