Hỗ trợ trực tuyến
Codedayroi.Net
© Copyright 2018 Code đây rồi

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

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!

Trần Thanh Bình

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi


Cùng tham gia bình luận bài viết này nhé!

» Hãy là con người văn minh từ những câu nói

Loading...