Vậy để thay thế "Older Posts" (Bài đăng cũ hơn) hay "Newer Posts" (Bài đăng mới hơn) trong blogspot, Tạo phân trang trong blogspot để blog của bạn thể hiện được tính chuyên nghiệp chúng ta phải làm thế nào?
Tạo phân trang trong blogspot
Trước tiên ta tìm hiểu phân trang (Page Navigation) trong blogspot là gì?Phân trang (Page Navigation), là thanh công cụ được đánh số để chia các bài viết trên trang chủ thành các trang khác nhau. Trong đó, số bài viết trên mỗi trang được người quản lý thay đổi theo ý thích.
Để tạo phân trang trong Blogspot, chúng ta thực hiện như sau:
Đầu tiên các bạn vào Blog nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>
[code type="HTML"]<b:if cond="data:blog.pageType != "item"">
<b:if cond="data:blog.pageType != "static_page"">
<script type="text/javascript">
/*<![CDATA[*/
var perPage=15;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="https://drive.google.com/uc?id=1_Kv4MwTdOUHVyEhgs-iGD44J-ChL1l54"></script>
</b:if>
</b:if>[/code]
<b:if cond="data:blog.pageType != "static_page"">
<script type="text/javascript">
/*<![CDATA[*/
var perPage=15;
var numPages=3;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="https://drive.google.com/uc?id=1_Kv4MwTdOUHVyEhgs-iGD44J-ChL1l54"></script>
</b:if>
</b:if>[/code]
Tìm tất cả dòng code sau (Chú ý là sẽ có nhiều đoạn như vậy và bạn sẽ thay hết toàn bộ chúng)
[code type="HTML"]expr:href='data:label.url'[/code]
Thay nó thành
[code type="HTML"]expr:href='data:label.url + "?&max-results=15"'[/code]
Cuối cùng là bạn sẽ áp dụng CSS style 1 trong các mẫu phân trang sau đây để áp dụng vào Blog của mình.
Cuối cùng là bạn sẽ áp dụng CSS style 1 trong các mẫu phân trang sau đây để áp dụng vào Blog của mình.
Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>. Sau đó paste đoạn code style mà bạn muốn lên trên thẻ ]]></b:skin>. Dưới đây là các style cho bạn lựa chọn.
Style 1:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;}[/code]
Style 2:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}[/code]
Style 3:Style 1:
Style 2:
Style 4:
Style 5:
Style 6:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}[/code]
Style 7:
[code type="CSS"]#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}[/code]
Đăng nhận xét