Hiệu ứng cuộn trang đẹp cho blogspot - Infinite Scrolling

Hiệu ứng cuộn trang Infinite Scrolling

Thủ thuật tạo hiệu ứng cuộn trang đẹp cho Blogspot được rất nhiều Blogger áp dụng. Với thủ thuật này, người xem không cần phải bấm hay click để chuyển trang mà chỉ cần dùng chuột cuộn xuống dưới là Blog tự động loading thêm các bài viết cũ ẩn phía sau.

Hương dẫn cách tạo hiệu ứng cuộn trang Infinite Scrolling:

Bước 1: Chọn Mẫu >> Chỉnh sửa HTML

Bước 2: Chèn đoạn code dưới đây vào sau thẻ </head>

<!--Infinite Scrolling Effect by kjmagic.blogspot.com-->
<b:if cond='data:blog.pageType == "index"'>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://yourjavascript.com/3147505541/kjmagic-infinite-scrolling-effect.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.ias({
    container : '.blog-posts',
    item: '.post-outer',
    pagination: '#blog-pager',
    next: '#blog-pager-older-link a',
    loader: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPVzTRA-zBIAknk8clMpNo2sPSdFELBbTx4Ma5Az8vVrnQm7UY4n_ePwR6wtjTqZnTsHq-myQsjMyCoFyBo01abMsz8VyMusApIWZayq5KsPAKfNmMnWzOgZpvxYyS-or3jg6a3vNU1dJy/s1600/loading.gif'
});
  </script>
</b:if>
<!--/Infinite Scrolling Effect by kjmagic.blogspot.com-->

Lưu ý: 

• Blog của bạn đã có JQuery thì xóa đoạn màu xanh đi nhé
• Thay thế link hình ảnh màu xanh thành link hỉnh ảnh hiệu ứng tải thêm bài viết khi kéo chuột xuống chân trang blog.

Bước 3: Chọn Lưu mẫu và ra ngoài F5 trang chủ để kiểm tra kết quả

Xem thêm thủ thuật khác: Tối ưu Blogspot chuẩn W3cC như thế nào?