Bạn muốn xem:
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 đẹp và chuẩn nhất.
Bước 1: Thêm code JavaScript phân trang
Đăng nhập Blog >> Vào Mẫu >> Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>
Trong đó:
postperpage=20; số bài viết hiển thị trên mỗi trang
numshowpage=4; số nút hiển thị trên thanh Navigation
var firstText ='Đầu';=> Có thể thay bằng chữ khác
var lastText ='Cuối';=> Có thể thay bằng chữ khác
Bước 2: Thêm style
Thêm đoạn code css sau vào trước thẻ ]]></b:skin> rồi Lưu Mẫu lại
Phần liên kết nhãn các bạn để thành ví dụ:
Thay 20 bằng số bài hiển thị trong một trang
Phần tìm kiếm các bạn đặt thêm thẻ input nữa:
Thay 20 bằng số bài hiển thị trong một trang
Ví dụ form tìm kiếm lúc đầu có dạng:
Thì các bạn để thành như sau:
QUAN TRỌNG: Bạn luôn phải đặt giá trị name='q' trong input của form tìm kiếm thì tiện ích phân trang mới chuẩn xác được, bạn có thể xem Demo trực tiếp trong blog của mình. Cảm ơn các bạn đã đọc.
Bước 1: Thêm code JavaScript phân trang
Đăng nhập Blog >> Vào Mẫu >> Chỉnh sửa HTML. Thêm đoạn code sau vào trước thẻ </body>
<!-- Page Counter - Edit Number Of Post To Show On Each Page -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=20;
var numPages=4;
var firstText ='Đầu';
var lastText ='Cuối';
var prevText ='<i class="fa fa-chevron-left"></i>';
var nextText ='<i class="fa fa-chevron-right"></i>';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
/*<![CDATA[*/
if (typeof firstText == "undefined") firstText = "First";
if (typeof lastText == "undefined") lastText = "Last";
var noPage;
var currentPage;
var currentPageNo;
var 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;
html += "<span class='showpageOf'>Trang " + currentPageNo + '/' + lastPageNo + "</span>";
var prevNumber = parseInt(currentPageNo) - 1;
//Iccsi was here, doing magic
if (currentPageNo > 1) {
if (currentPage == "page") {
html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
} else {
html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
}
}
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>'
}
}
}
if (pageStart > 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>'
}
}
if (pageStart > 2) {
html += ' ... '
}
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>'
}
}
}
if (pageEnd < lastPageNo - 1) {
html += '...'
}
if (pageEnd < lastPageNo) {
if (currentPage == "page") {
html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
} else {
html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</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>'
}
}
if (currentPageNo < lastPageNo) {
//Iccsi was here, doing magic
if (currentPage == "page") {
html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
} else {
html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</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>
</b:if>
Trong đó:
postperpage=20; số bài viết hiển thị trên mỗi trang
numshowpage=4; số nút hiển thị trên thanh Navigation
var firstText ='Đầu';=> Có thể thay bằng chữ khác
var lastText ='Cuối';=> Có thể thay bằng chữ khác
Bước 2: Thêm style
Thêm đoạn code css sau vào trước thẻ ]]></b:skin> rồi Lưu Mẫu lại
#blog-pager{padding-top: 20px; padding-bottom: 20px;text-align: center;overflow: hidden;}
.blog-pager {background: none;}
.displaypageNum a, .showpage a, .pagecurrent {font-size: 13px;font-weight: bold;padding: 6px 8px;margin-right:5px; color: #555; background:#e7e7e7; border:1px solid #ccc;border-radius: 3px;-webkit-border-radius: 3px;}
.displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#edf4ff;text-decoration:none;color:#555;}
#blog-pager .pagecurrent {font-weight:bold;color: #777;background:#fff}
.showpageOf {background: #e7e7e7;color: #555;font-size: 13px;font-weight:bold;margin-right: 5px;border: 1px solid #ccc;padding: 6px 8px;-webkit-border-radius: 3px;}
#blog-pager .pages {border:1px solid #ccc;}
Phần liên kết nhãn các bạn để thành ví dụ:
<li><a href='/search/label/Blogger?&max-results=20' title='Chơi Blog'> Chơi Blog</a></li>
Thay 20 bằng số bài hiển thị trong một trang
Phần tìm kiếm các bạn đặt thêm thẻ input nữa:
<input name='max-results' type='hidden' value='20'/>
Thay 20 bằng số bài hiển thị trong một trang
Ví dụ form tìm kiếm lúc đầu có dạng:
<form action='/search' id='search'> <input name='q' onblur='if(this.value=='') this.value='Nhập nội dung cần tìm'' onfocus='if(this.value=='Nhập nội dung cần tìm') this.value=''' placeholder='Nhập nội dung cần tìm...' type='text' value='Nhập nội dung cần tìm'/> <button title='Tìm kiếm' type='submit'><span class='fa fa-search'/></button> </form>
Thì các bạn để thành như sau:
<form action='/search' id='search'> <input name='q' onblur='if(this.value=='') this.value='Nhập nội dung cần tìm'' onfocus='if(this.value=='Nhập nội dung cần tìm') this.value=''' placeholder='Nhập nội dung cần tìm...' type='text' value='Nhập nội dung cần tìm'/> <input name='max-results' type='hidden' value='20'/> <button title='Tìm kiếm' type='submit'><span class='fa fa-search'/></button> </form>
QUAN TRỌNG: Bạn luôn phải đặt giá trị name='q' trong input của form tìm kiếm thì tiện ích phân trang mới chuẩn xác được, bạn có thể xem Demo trực tiếp trong blog của mình. Cảm ơn các bạn đã đọc.
loading...
Loading...
0 nhận xét: