Chào các bạn cũng đã lâu rồi mình chưa post bài hướng dẫn về Blogger nên nay mình sẽ hướng dẫn các bạn cách tạo phân trang trong bài viết dành cho Blogger / Blogspot.Đây cũng chỉ mọt Thủ Thuật Blogger nhỏ cho các bạn mới chơi blogspot thôi ạ. :)




ƯU ĐIỂM:
- Nhẹ
- Đẹp

HƯỚNG DẪN CÁCH LÀM:
Bước 1: Bạn đăng nhập vào Blogger -> Chủ đề -> Chỉnh sửa HTML bạn nhấn tổ hợp phím Ctrl F và tìm kiếm thẻ ]]></b:skin> và dán đoạn css sau lên phía trên để làm đẹp cho nó

ul.post-pager{margin-top:15px} .post-pager li{padding:0;display:inline-block;width:50%} .post-pager li strong{display:block;padding:0 0 10px} ul.post-pager{background-color:#FFF;display:block;width:100%;overflow:hidden} .post-pager li a{color:#555;display:block;padding:20px 35px} .post-pager li:hover{background-color:#FFC000} .post-pager li:hover a{color:#888;background:#f8f8f8} ul.post-pager *{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease} .post-pager .previous{float:left} .post-pager .next{text-align:right} .post-pager span{text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;overflow:hidden;-webkit-box-orient:vertical} @media screen and (max-width: 420px) { ul.post-pager{display:none} }
Bước 2: Bạn chú ý đặc biệt bước này, bạn tìm đến thẻ <data:post.body/> tuy nhiên kết quả sẽ cho nhiều hơn 1, vì vậy bạn cần thử từng cái (nên backup template nếu có lỗi thì còn mẫu để cập nhật lại)
Sau đó bạn dán code sau phía dưới <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='post-pager'> <li class='next'> <b:if cond='data:newerPageUrl'> <a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'/><b:else/> <a><strong>Kế tiếp</strong> <span>Bạn đang xem bài đăng gần đây nhất</span></a> </b:if> </li> <li class='previous'> <b:if cond='data:olderPageUrl'><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'/><b:else/><a><strong>Trước đó</strong> <span>Bạn đang xem bài cuối</span></a> </b:if> </li> </ul> <script type='text/javascript'> //<![CDATA[ !function(t){var n=t("a.newer-link"),e=t("a.older-link");t.get(n.attr("href"), function(e){n.html("<strong>Kế tiếp <i class='fas fa-angle-double-right'></i></strong> <span>"+t(e).find(".post h1.post-title").text()+"</span>")},"html"),t.get(e.attr("href"), function(n){e.html("<strong><i class='fas fa-angle-double-left'></i> Trước đó</strong> <span>"+t(n).find(".post h1.post-title").text()+"</span>")},"html")}(jQuery); //]]> </script> </b:if>
Lưu mẫu lại và vào bài viết để xem kết quả. Chúc bạn thành công!

                                                                                                                         Nguồn: codedayroi.net


- - 3 bình luận -

HIỆN TẠI CÓ 3 BÌNH LUẬN

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé