CÁCH 2:
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 ?&max-results=số trang ví dụ ?&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?&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 + "?&max-results=8"’
expr:title=’data:label.name’ ><data:label.name/></a>
Chấm
hết bài!!!
0 comments: