Mẫu phân trang đánh số thứ tự đẹp cho Blog

Đây là mẫu phân trang rút gọn từ mẫu mà mình đã giới thiệu trong bài viết cũ trước đây. Phân trang rút gọn chỉ còn số trang thứ tự, nút mở trang kế tiếp và nút trở về trang trước. Thêm vào đó mình cũng thiết kế giao diện nhìn đẹp và chuyên nghiệp hơn.

Phân trang (Page Navigation) là một tiện ích được nhiều Blog áp dụng nhằm tăng tính chuyên nghiệp cho trang Blog của mình thay thế cho kiểu phân trang truyền thống của Blogspot. Dưới đây mình sẽ hướng dẫn các bạn cách phân trang cho Blogspot, các bạn xem demo tại địa chỉ Blog: https://vietbloggerthemes.blogspot.com

Bước 1: Thêm script tạo phân trang đánh số thứ tự

Đăng nhập Blog > Chủ đề > Chỉnh sửa HTML. Thêm đoạn script sau vào trước thẻ đóng </body>

Copy

<b:if cond='data:view.isMultipleItems'>

<script>//<![CDATA[

var perPage = 8,

  numPages = 4,

  prevText = '<span class="prevText"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span>',

  nextText = '<span class="nextText"><svg><use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_forward_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"></use></svg></span>',

  urlactivepage = location.href,

  home_page = "/",

  noPage,

  currentPage,

  currentPageNo,

  postLabel;

pagecurrentg();



function looppagecurrentg(pageInfo) {

  var html = '';

  pageNumber = parseInt(numPages / 2);

  if (pageNumber == numPages - pageNumber) {

    numPages = pageNumber * 2 + 1

  }

  pageStart = currentPageNo - pageNumber;

  if (pageStart < 1) pageStart = 1;

  lastPageNo = parseInt(pageInfo / perPage) + 1;

  if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;

  pageEnd = pageStart + numPages - 1;

  if (pageEnd > lastPageNo) pageEnd = lastPageNo;

  var prevNumber = parseInt(currentPageNo) - 1;

  if (currentPageNo > 2) {

    if (currentPageNo == 3) {

      if (currentPage == "page") {

        html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'

      } else {

        html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'

      }

    } else {

      if (currentPage == "page") {

        html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'

      } else {

        html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'

      }

    }

  }

  for (var jj = pageStart; jj <= pageEnd; jj++) {

    if (currentPageNo == jj) {

      html += '<span class="pagecurrent">' + jj + '</span>'

    } else if (jj == 1) {

      if (currentPage == "page") {

        html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'

      } else {

        html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'

      }

    } else {

      if (currentPage == "page") {

        html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'

      } else {

        html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'

      }

    }

  }

  var nextnumber = parseInt(currentPageNo) + 1;

  if (currentPageNo < (lastPageNo - 1)) {

    if (currentPage == "page") {

      html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'

    } else {

      html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'

    }

  }

  var pageArea = document.getElementsByName("pageArea");

  var blogPager = document.getElementById("blog-pager");

  for (var p = 0; p < pageArea.length; p++) {

    pageArea[p].innerHTML = html

  }

  if (pageArea && pageArea.length > 0) {

    html = ''

  }

  if (blogPager) {

    blogPager.innerHTML = html

  }

}



function totalcountdata(root) {

  var feed = root.feed;

  var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);

  looppagecurrentg(totaldata)

}



function pagecurrentg() {

  var thisUrl = urlactivepage;

  if (thisUrl.indexOf("/search/label/") != -1) {

    if (thisUrl.indexOf("?updated-max") != -1) {

      postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))

    } else {

      postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))

    }

  }

  if (thisUrl.indexOf(".html") == -1) {

    if (thisUrl.indexOf("/search/label/") == -1) {

      currentPage = "page";

      if (urlactivepage.indexOf("#PageNo=") != -1) {

        currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)

      } else {

        currentPageNo = 1

      }

      if (thisUrl.indexOf("q=") == -1) {

        document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")

      } else {

        document.write("<script src=\"" + home_page + "feeds/posts/summary?q=" + thisUrl.split("?")[1].split("q=")[1].split("&")[0] + "&alt=json-in-script&callback=totalcountdata\"><\/script>")

      }

    } else {

      currentPage = "label";

      if (thisUrl.indexOf("&max-results=") == -1) {

        perPage = 20

      }

      if (urlactivepage.indexOf("#PageNo=") != -1) {

        currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)

      } else {

        currentPageNo = 1

      }

      document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')

    }

  }

}



function redirectpage(numberpage) {

  jsonstart = (numberpage - 1) * perPage;

  noPage = numberpage;

  var nameBody = document.getElementsByTagName('head')[0];

  var newInclude = document.createElement('script');

  newInclude.type = 'text/javascript';

  if (urlactivepage.indexOf("?q=") == -1) {

    newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");

  } else {

    newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&alt=json-in-script&q=" + urlactivepage.split("?")[1].split("q=")[1].split("&")[0] + "&callback=finddatepost");

  }

  nameBody.appendChild(newInclude);

}



function redirectlabel(numberpage) {

  jsonstart = (numberpage - 1) * perPage;

  noPage = numberpage;

  var nameBody = document.getElementsByTagName('head')[0];

  var newInclude = document.createElement('script');

  newInclude.type = 'text/javascript';

  newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");

  nameBody.appendChild(newInclude)

}



function finddatepost(root) {

  post = root.feed.entry[0];

  var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);

  var timestamp = encodeURIComponent(timestamp1);

  if (currentPage == "page") {

    if (urlactivepage.indexOf("?q=") == -1) {

      var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage

    } else {

      var pAddress = "/search?updated-max=" + timestamp + "&q=" + urlactivepage.split("?")[1].split("q=")[1].split("&")[0] + "&max-results=" + perPage + "#PageNo=" + noPage

    }

  } else {

    var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage

  }

  location.href = pAddress

}

//]]></script>

</b:if>

Thiết lập:

perPage = 8; // Số bài đăng hiển thị trong một trang
numPages = 4; // Số phân trang hiển thị

Trong trường hợp nếu là widget Blog1 version 2, sau khi thêm script mà không hiển thị, các bạn tìm đến thẻ:

<b:includable id='postPagination'>...</b:includable>

Các bạn mở thẻ này thay thế code xml bên trong thành:

<div class='blog-pager' id='blog-pager'>
  <a expr:href='data:olderPageUrl' expr:title='data:messages.loadMorePosts'/>
</div>

Bước 2. Thêm css trong <b:skin> tạo style cho phân trang

Copy

#blog-pager{float:left;width:100%;margin:20px 0;text-align:center}

#blog-pager span{display:inline-block;}

#blog-pager span svg{width:21px;height:21px;min-width:21px;min-height:21px;vertical-align:text-bottom;fill:hsl(0,0%,53.3%)}

#blog-pager span.pagecurrent,#blog-pager span a{width:40px;height:40px;line-height:40px;display:inline-block;color:#999;border:1px solid #dfdfdf;font-size:16px;margin-right:5px;background:#fff;border-radius:4px;}

#blog-pager span:last-child a{margin:0}

#blog-pager span a:hover,#blog-pager span.pagecurrent{background:#168fd6;color:#fff;border:1px solid #168fd6}

#blog-pager span svg:hover{fill:#fff}

Lưu ý quan trọng:

- Vào Cài đặt > Bài đăng nhận xét và chia sẻ > chọn Hiển thị tối đa bằng số bài đăng được thiết lập trong script ví dụ perPage = 8; thì cài đặt hiển thị tối đa 8 bài.

- Thêm ?&amp;max-results=số trang ví dụ ?&amp;max-results=8 đằng sau link Label ví dụ:

+ Khi tạo menu có dạng

<li><a href="/search/label/thu-thuat-blogspot" title="Thủ thuật Blogspot">Thủ thuật Blogspot</a></li>

Sửa thành

<li><a href="/search/label/thu-thuat-blogspot?&amp;max-results=8" title="Thủ thuật Blogspot">Thủ thuật Blogspot</a></li>

+ Với trường hợp link Label có dạng

<a expr:href='data:label.url' expr:title='data:label.name' ><data:label.name/></a>

Sửa thành

<a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' ><data:label.name/></a>

Chấm hết bài!!!

Nội dung chính