Bài viết này mình Hướng dẫn Phân trang bài viết blogspot, cách phân trang số thứ tự Blogger, Phân trang trong Blogger Page Navigation. Cách tạo phân trang cho blogger đẹp.
Phân trang Blogger này áp dụng cho các blog ở phiên bản mới LayoutsVersion 3
Cách tạo Phân trang bài viết blogspot như sau:
Bước 1: Thêm thư viện Font Awesome, các bạn copy đoạn code bên dưới dán dưới thẻ <head>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Mục đích là tạo Icon sang phải, icon sang trái như hình trên.
Bước 2: Các bạn copy CSS bên dưới dán trong thẻ <b:skin> Dán ở đây </b:skin> dán phía dưới thẻ <b:skin> hoặc phía trên thẻ </b:skin> đều được.
.blog-pager-wrapper{text-align:center}
#blog-pager{display:inline-block;overflow:hidden;clear:both;margin:0 0 30px}
.blog-pager a,.blog-pager span{float:left;display:block;min-width:32px;height:32px;border:1px solid #d0d0d2;border-radius:100%;background:#ffffff;color:#000000;font-size:13px;font-weight:700;line-height:30px;text-align:center;box-sizing:border-box;padding:0 10px;margin:0 5px 0 0;transition:all .17s ease}
.blog-pager span.page-dots{display:none}
.blog-pager .page-of{display:none;width:auto;float:right;border-color:rgba(0,0,0,0);margin:0}
.blog-pager .page-active,.blog-pager a:hover{background-color:#E84E89;color:#fff;border-color:#E84E89}
.blog-pager .page-prev:before,.blog-pager .page-next:before{font-family:FontAwesome;font-size:11px;font-weight:400}
.blog-pager .page-prev:before{content:'\f053'}
.blog-pager .page-next:before{content:'\f054'}
.blog-pager .blog-pager-newer-link,.blog-pager .blog-pager-older-link{float:left;display:inline-block;width:auto;padding:0 10px;margin:0}
.blog-pager .blog-pager-older-link{float:right}
.archive #blog-pager,.home .blog-pager .blog-pager-newer-link,.home .blog-pager .blog-pager-older-link{display:none}
Bước 3: Bạn đoạn đoạn code Pagination Scripts này trước thẻ đóng </body>
<script>
//<![CDATA[
var postResults=7;
var numOfPages=2;
var pageOf=["Page", "of"];
var noPage,currentPage,currentPageNo,postLabel,locationUrl=location.href,home_page="/";function startPagination(e){var a="";pageNumber=parseInt(numOfPages/2),pageNumber==numOfPages-pageNumber&&(numOfPages=2*pageNumber+1),pageStart=currentPageNo-pageNumber,pageStart<1&&(pageStart=1),lastPageNo=parseInt(e/postResults)+1,lastPageNo-1==e/postResults&&(lastPageNo-=1),pageEnd=pageStart+numOfPages-1,pageEnd>lastPageNo&&(pageEnd=lastPageNo),a+='<span class="page-of">'+pageOf[0]+" "+currentPageNo+" "+pageOf[1]+" "+lastPageNo+"</span>";var t=parseInt(currentPageNo)-1;currentPageNo>1&&(a+=2==currentPageNo?"page"==currentPage?'<a class="page-num page-prev" href="'+home_page+'"></a>':'<a class="page-num page-prev" href="/search/label/'+postLabel+"?&max-results="+postResults+'"></a>':"page"==currentPage?'<a class="page-num page-prev" href="#" onclick="getPage('+t+');return false"></a>':'<a class="page-num page-prev" href="#" onclick="getLabelPage('+t+');return false"></a>'),pageStart>1&&(a+="page"==currentPage?'<a class="page-num" href="'+home_page+'">1</a>':'<a class="page-num" href="/search/label/'+postLabel+"?&max-results="+postResults+'">1</a>'),pageStart>2&&(a+='<span class="page-num page-dots">...</span>');for(var s=pageStart;s<=pageEnd;s++)a+=currentPageNo==s?'<span class="page-num page-active">'+s+"</span>":1==s?"page"==currentPage?'<a class="page-num" href="'+home_page+'">1</a>':'<a class="page-num" href="/search/label/'+postLabel+"?&max-results="+postResults+'">1</a>':"page"==currentPage?'<a class="page-num" href="#" onclick="getPage('+s+');return false">'+s+"</a>":'<a class="page-num" href="#" onclick="getLabelPage('+s+');return false">'+s+"</a>";pageEnd<lastPageNo-1&&(a+='<span class="page-num page-dots">...</span>'),pageEnd<lastPageNo&&(a+="page"==currentPage?'<a class="page-num" href="#" onclick="getPage('+lastPageNo+');return false">'+lastPageNo+"</a>":'<a class="page-num" href="#" onclick="getLabelPage('+lastPageNo+');return false">'+lastPageNo+"</a>");var r=parseInt(currentPageNo)+1;currentPageNo<lastPageNo&&(a+="page"==currentPage?'<a class="page-num page-next" href="#" onclick="getPage('+r+');return false"></a>':'<a class="page-num page-next" href="#" onclick="getLabelPage('+r+');return false"></a>'),a+="";for(var n=document.getElementsByName("pageArea"),g=document.getElementById("blog-pager"),l=0;l<n.length;l++)n[l].innerHTML=a;n&&n.length>0&&(a=""),g&&(g.innerHTML=a)}function dataFeed(e){var a=e.feed;startPagination(parseInt(a.openSearch$totalResults.$t,10))}function pageCurrentBlogger(){var e=locationUrl;-1!=e.indexOf("/search/label/")&&(postLabel=-1!=e.indexOf("?updated-max")?e.substring(e.indexOf("/search/label/")+14,e.indexOf("?updated-max")):e.substring(e.indexOf("/search/label/")+14,e.indexOf("?&max"))),-1==e.indexOf("?q=")&&-1==e.indexOf(".html")&&(-1==e.indexOf("/search/label/")?(currentPage="page",currentPageNo=-1!=locationUrl.indexOf("#PageNo=")?locationUrl.substring(locationUrl.indexOf("#PageNo=")+8,locationUrl.length):1,document.write("<script src='"+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=dataFeed'><\/script>")):(currentPage="label",-1==e.indexOf("&max-results=")&&(postResults=20),currentPageNo=-1!=locationUrl.indexOf("#PageNo=")?locationUrl.substring(locationUrl.indexOf("#PageNo=")+8,locationUrl.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+postLabel+'?alt=json-in-script&callback=dataFeed&max-results=1" ><\/script>')))}function getPage(e){jsonstart=(e-1)*postResults,noPage=e;var a=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=findPostDate"),a.appendChild(t)}function getLabelPage(e){jsonstart=(e-1)*postResults,noPage=e;var a=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript",t.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=findPostDate"),a.appendChild(t)}function findPostDate(e){post=e.feed.entry[0];var a=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),t=encodeURIComponent(a);if("page"==currentPage)var s="/search?updated-max="+t+"&max-results="+postResults+"#PageNo="+noPage;else s="/search/label/"+postLabel+"?updated-max="+t+"&max-results="+postResults+"#PageNo="+noPage;location.href=s}pageCurrentBlogger();
//]]>
</script>
Trong đó postResults=7 chính là số lượng bài viết hiện thị ra.