Tạo phân trang có đánh số cho blogger

Trần Minh Hiếu 10:48 Blogger Blogger Tips

Theo mặc định của blogger và đa số các template miễn phí thì không có chức năng tự động phân trang cho blog. Có nghĩa là nó sẽ hiện Older post hay Newer post chứ không có phân ra các trang có đánh số cho người đọc dễ theo dõi và thao tác. Bài viết sẽ giúp bạn tạo ra một phân trang như thế



Trước tiên bạn cần đăng nhập vào Blogger > edit Template. Sau đó chèn đoạn CSS sau vào trước thẻ ]]></b:skin> hoặc </style>

/* CSS Page Navigation */
.gmr-pagenav {text-align:center;line-height:1.4em;margin:15px 0 30px 0;text-align:center;font-size:14px;}
.gmr-pagenav span,
.gmr-pagenav a{background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-moz-transition: none;-webkit-transition: none;transition: none;display: inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align: middle;font-size: 14px;color: #fff !important;text-decoration: none !important;}
.gmr-pagenav .pages{background:$colorscheme;color:#fff;}
.gmr-pagenav .current,
.gmr-pagenav a:hover {top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-pagenav a:active {top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}
.gmr-pagenav .pages {display:none;} 

Sau đó tìm và thay thê:

<b:include name='nextprev'/> 

bằng đoạn:

<b:if cond='data:blog.isMobile == "true"'>
 <b:include name='nextprev'/>
<b:else/>
 <div class='gmr-pagenav'>
  <script type='text/javascript'>
   var pageNaviConf = {
    perPage: 7,
    numPages: 5,
    firstText: "First",
    lastText: "Last",
    nextText: "Next",
    prevText: "Prev"
   }
  </script>
  <script type='text/javascript'>
    //<![CDATA[
    function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'" title="First Page" rel="nofollow">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'" title="Previous Page" rel="nofollow">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'" title="Previous Page" rel="nofollow">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'" title="Next Page" rel="nofollow">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'" title="Last Page" rel="nofollow">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
    //]]>
  </script>
 </div>
 <div style='clear:both;'/>
</b:if>

Lưu ý là dòng code vàng có mục đích là không cho phân trang trên giao diện mobile, bạn kiểm tra nếu không được thì thay bằng code:

 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

DEMO