Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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 = /<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