Ta cần có phân trang tại trang chủ, trang nhãn và trang bài viết.Phân trang tại trang bài viết là giúp khách truy cập chuyển từ bài đang xem tới bài cũ hơn liền kề và ngược lại.
Tại bài này hướng dẫn các bạn cách cài đặt phân trang tại trang bài viết với URL là tiêu đề bài viết nhìn rất trực quan và sinh động.
Để tiến hành cài đặt bạn cần qua các bước.
Kiểu 1
Bước 1
Thêm css sau vào trong mẫu với việc dán trước thẻ ]]></b:skin>
.moving-post{width:100%;display:block;font-weight:600;font-size:18px;padding:10px 0}
.page-new{background:#fff;float:left;padding:5px 10px 5px 5px;width:50%;text-align:left}
.page-old{background:#fff;float:right;padding:5px 5px 5px 10px;width:50%;border-left:1px solid #dadada;text-align:right}Bước 2
Thêm đoạn code sau vào nơi bạn muốn,thường là sau thẻ <div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var a=$("a.page-new").attr("href");$("a.page-new").load(a+" .post-title:first",function(){var a=$("a.page-new").text();$("a.page-new").html("«<h7>"+a+"<h7>")});var t=$("a.page-old").attr("href");$("a.page-old").load(t+" .post-title:first",function(){var a=$("a.page-old").text();$("a.page-old").html("<h7>"+a+"</h7>»")})});
//]]>
</script>
<div class='moving-post' id='moving-post'>
<b:if cond='data:newerPageUrl'>
<a class='page-new' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='page-old' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</b:if>
</div>
</b:if>
<div class='clear'/>Bước 3
Nếu blog của bạn sử dụng phân trang mặc định của blogger(không cài thêm tiện ích phân trang).Để phân trang mặc định của blogger không xuất hiện trong trang bài viết của blogspot mà chỉ xuất hiện ở tran nhãn hặc trang chủ thì cần làm thêm một bước nhỏ là:
Thêm:
<b:if cond='data:blog.pageType != "item"'>Vào sau thẻ:
<b:includable id='nextprev'>
Và thêm
</b:if>
Vào trước thẻ đóng
</b:includable>
Kiểu 2
Bước 1
Thêm css sau vào trong mẫu với việc dán trước thẻ ]]></b:skin>
.pager-dtb{border-top:1px solid #eee;overflow:hidden}
.pager-dtb a,.pager-dtb .linkgrey{width:50%;display:block;float:left;padding:10px 0;text-decoration:none}
.pager-dtb h6{font-size:16px;font-weight:normal;color:#f90;margin:0}
.pager-dtb h5{font-size:15px;font-weight:bold;margin:0}
a.blog-pager-newer-link{text-align:left}
a.blog-pager-newer-link h6,a.blog-pager-newer-link h5{padding-left:0}
a.blog-pager-older-link{text-align:right}
a.blog-pager-older-link h6,a.blog-pager-older-link h5{padding-right:0}
.pager-dtb .linkgrey.left{text-align:left}
.pager-dtb .linkgrey.right{text-align:right}Bước 2
Thêm đoạn code sau vào nơi bạn muốn,thường là sau thẻ <div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<div class='blog-pager' id='blog-pager'>
<div class='pager-dtb'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
<b:else/>
<span class='linkgrey left'>
<h6>
←Newer Posts
</h6>
<h5>
This is the most recent post.
</h5>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
<b:else/>
<span class='linkgrey right'>
<h6>
Older Posts→
</h6>
<h5>
This is the last post.
</h5>
</span>
</b:if>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
(function(a){var c=a("a.blog-pager-newer-link"),d=a("a.blog-pager-older-link");a.get(c.attr("href"),function(b){c.html("<h6>←Newer Posts</h6><h5>"+a(b).find(".post h1.post-title").text()+"</h5>")},"html");a.get(d.attr("href"),function(b){d.html("<h6>Older Posts→</h6><h5>"+a(b).find(".post h1.post-title").text()+"</h5>")},"html")})(jQuery);
//]]>
</script>
<div class='clear'/>
</b:if>Bước 3
Các bạn thực hiện chỉnh sửa như ở kiểu 1.
Bước 4
Nếu blog của bạn sử dụng phân trang mặc định của blogger tìm ở phần css sẽ có vài dòng về
- .blog-pager-newer-link
- .blog-pager-older-link
- .blog-pager
- .home-link,.blog-pager-newer-link,.blog-pager-older-link
Bạn tách nó ra hoặc tốt nhất là xóa nó đi và thay nó bằng code sau và dán trước thẻ </head>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.blog-pager-newer-link{float:left;margin-left:10px}
.blog-pager-older-link{float:right;margin-right:10px}
.blog-pager{width:100%;margin:1em 0;text-align:center;overflow:hidden;border-top:1px solid #ccc;padding-top:20px}
.home-link,.blog-pager-newer-link,.blog-pager-older-link{background:#fff;padding:3px;font-size:16px;color:#005595}
</style>
</b:if>Chúc cài đặt thành công!Có gì vướng mắc thì để lại yêu cầu trợ giúp vào comments bên blogger.