Bài đăng nổi bật

Ford Biên Hòa Đồng Nai - Đại lý mua bán xe giá tốt nhất

Xuất hiện tại Biên Hòa Đồng Nai từ năm 2007 tới nay, hãng xe Ôtô nổi tiếng tới từ Mỹ –  Ford Motor  đã khẳng định được một chỗ đứng trong l...

Chủ Nhật, 25 tháng 9, 2016

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

0 nhận xét

Đăng nhận xét