Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger

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 ...
2/05/2016

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

Chèn đoạn code bên dưới trước thẻ đóng </body>
<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
Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger Thêm hiệu ứng loading đẹp khi chuyển trang cho bloggerTrương Ngọc Tuấn8.8stars based on9reviews 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 ...
  • Blog bạn bè:
  • Admin Hiếu Blog |
  • Thủ thuật Windows |
  • Dii Nô IT |
  • Star Thịnh IT |
  • Star Bình IT |
  • Star Dũ IT |
  • Nguyễn Hùng IT |
  • By Trọng Trung |
  • Văn Dũng IT |
  • Star Cường IT
  • Lên trên