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

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

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 đỏ 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;'>

See the Pen Page navigation by ducnguyen (@ducrat) on CodePen.

Nguồn bài viết: gianmr.com