Tạo phân trang trong bài viết cho blogspot

Duc Tran

tháng 4 16, 2018

Chào các bạn cũng đã lâu rồi mình chưa post bài hướng dẫn về blogspot 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 blogspot

Phía bên dưới đây là demo:

Ư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!