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ì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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLPqYTqIm63AaVujKwbtCId7h7cjOGsz7HOWREiPw7BP7qoIaX8HrHCW5hRacF3EQPtkfTzFW0Oa27qnqOQwI6xcozV-v0RplZtJ3RtltgEb61-e1mbBAJsB49psa8F_twQ7TjNl4IMUIV/s0/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 = /<script\b[^<]*(?:(?!<\/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!!!

Nội dung chính