Hướng dẫn tạo phân trang với nút tải thêm bài viết

Thủ thuật tạo phân trang với nút tải thêm bài viết (loadmore posts) với chỉ vài bước đơn giản sau đây giúp Blog của bạn trở nên chuyên nghiệp hơn. Trong trường hợp bạn đang tạo phân trang đánh số thứ tự bạn vẫn có thể thêm phân trang tải thêm bài viết cho một trang cố định nào đó ví dụ như trang Nhãn, trang tìm kiếm từ khóa, trang lưu trữ…

Hướng dẫn tạo phân trang với nút tải thêm bài viết
Hình minh họa vói nút tải thêm bài viết

Demo: https://www.nhipsong24h.net

Để thêm được phân trang với nút tải thêm bài viết bạn cần sử dụng đoạn js đặt trước thẻ đóng </body> và css tạo style cho nút đặt trong <b:skin>

#jQuery

Copy

<script>

//<![CDATA[

(function($) {

    var loadingGif = 'https://1.bp.blogspot.com/-KV2XR964ylU/VmPf26HwlsI/AAAAAAAAASI/7l-4hZ1NV7o/s000/ajax-loader.gif';

    var olderPostsLink = '';

    var loadMoreDiv = null;

    var postContainerSelector = 'div.blog-posts';

    var loading = false;

    var win = $(window);

    var doc = $(document);

    // Took from jQuery to avoid permission denied error in IE.

    var rscript = /<scriptb[^<]*(?:(?!</script>)<[^<]*)*</script>/gi;



    function loadDisqusScript(domain) {

        $.getScript('http://' + domain + '.disqus.com/blogger_index.js');

    }



    function loadMore() {

        if (loading) {

            return;

        }

        loading = true;



        if (!olderPostsLink) {

            loadMoreDiv.hide();

            return;

        }



        loadMoreDiv.find('a').hide();

        loadMoreDiv.find('img').show();

        $.ajax(olderPostsLink, {

            'dataType': 'html'

        }).done(function(html) {

            var newDom = $('<div></div>').append(html.replace(rscript, ''));

            var newLink = newDom.find('a.blog-pager-older-link');

            if (newLink) {

                olderPostsLink = newLink.attr('href');

            } else {

                olderPostsLink = '';

                loadMoreDiv.hide();

            }



            var newPosts = newDom.find(postContainerSelector).children('.post-outer');

            $(postContainerSelector).append(newPosts);

            // Loaded more posts successfully.  Register this pageview with

            // Google Analytics.

            if (window._gaq) {

                window._gaq.push(['_trackPageview', olderPostsLink]);

            }

            // Render +1 buttons.

            if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) {

                window.gapi.plusone.go();

            }

            // Render Disqus comments.

            if (window.disqus_shortname) {

                loadDisqusScript(window.disqus_shortname);

            }

            // Render Facebook buttons.

            if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) {

                window.FB.XFBML.parse();

            }



            loadMoreDiv.find('img').hide();

            loadMoreDiv.find('a').show();



            loading = false;

        });

    }



    function init() {

        if (_WidgetManager._GetAllData().blog.pageType == 'item') {

            return;

        }



        olderPostsLink = $('a.blog-pager-older-link').attr('href');

        if (!olderPostsLink) {

            return;

        }



        var link = $('<a class="loadpost" href="javascript:;" title="Bấm để xem thêm">xem thêm</a>');

        link.click(loadMore);

        var img = $('<img src="' + loadingGif + '" style="display: none;">');



        loadMoreDiv = $('<div style="text-align:center;clear:both;"></div>');

        loadMoreDiv.append(link);

        loadMoreDiv.append(img);

        loadMoreDiv.insertBefore($('#blog-pager'));

        $('#blog-pager').hide();

    }



    $(document).ready(init);



})(jQuery);

 //]]>

</script>

Đặt đoạn js trong thẻ điều kiện nếu muốn nút tải thêm xuất hiện ở trang này, nếu muốn đặt ở tất cả các trang index, đặt đoạn script trong <b:if cond=’data:view.isMultipleItems’> dưới đây là điều kiện của các trang index:

+ <b:if cond=’data:view.isHomepage’> Trang chủ
+ <b:if cond=’data:view.isLabelSearch’> Trang Nhãn
+ <b:if cond=’data:view.isSearch’> Các trang bài đăng tiếp theo
+ <b:if cond=’data:blog.searchQuery’> Trang tìm kiếm từ khóa
+ <b:if cond=’data:view.isArchive’> Trang lưu trữ
+ <b:if cond=’data:blog.searchLabel == &quotTên nhãn&quot’> Trang tìm kiếm cho 1 nhãn cố định

Ví dụ bạn có thể kết hợp với điều kiện không phải ở trang chủ và các trang tiếp theo như sau:

<b:if cond=’!data:view.isHomepage and !data:view.isSearch’>
// Đặt js trong đây
</b:if>

# css đặt trong <b:skin>

Copy

a.loadpost {

    margin: 5px 0 10px;

    display: inline-block;

    padding: 0 40px 0 10px;

    height: 36px;

    background: #005791;

    position: relative;

    font-family: Arial;

    font-size: 16px;

    font-weight: 700;

    text-transform: uppercase;

    line-height: 38px;

    color: #fff;

    text-decoration: none;

    border-radius: 100px;

    -webkit-border-radius: 100px;

    -moz-border-radius: 100px;

    transition: background .3s;

    -webkit-transition: background .3s;

    -moz-transition: background .3s;

}

a.loadpost:before {

    display: block;

    width: 30px;

    height: 30px;

    background: url(https://i.imgur.com/W169O3u.png) -68px -36px no-repeat;

    position: absolute;

    top: 3px;

    right: 5px;

    content: "";

}

Chấm hết bài!!!

3
Hãy để lại một câu trả lời bạn muốn

avatar
250
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Huỳnh Phụng BloggerViệt BloggerTrần Nhật Sinh Recent comment authors
  Subscribe  
Mới nhất Lâu đời nhất
Thông báo
Huỳnh Phụng Blogger
Khách

Code này hình như không chạy trên trang. Mình chèn trên /body. Bạn xem dùm mình xem https://www.toilaquantri.com/search?q=seo

Việt Blogger
Khách

Mình trả lời bạn trên Facebook rồi đấy

Trần Nhật Sinh
Khách

Hay quá a ơi

Scroll to top
0353.456.495