Tạo phân trang đẹp cho blogger, Tạo phân trang chuẩn cho Blogspot

Hướng dẫn các bạn chi tiết cách Tạo phân trang đẹp cho blogger, Hướng dẫn thủ thuật Tạo phân trang chuẩn cho Blogspot

Phân trang này hoạt động cả trên các trang nhãn kèm nhiều style css rất đẹp. Ảnh demo bên dưới.

Nào chúng ta cùng cài đặt qua 2 bước đơn giản. Nên nhớ là xóa phân trang có sẳn trên blog của bạn trước nhé nó bao gồm các đoạn CSS và Javasript

1. CÀI ĐẶT CSS

- Vào Mẫu > Chỉnh sửa HTML
- Ấn Ctrl + F để mở khung tìm kiếm
- Tìm đến thẻ ]]></b:skin>
- Chọn 1 trong các style css sau trên thẻ ]]></b:skin> vừa tìm được. Chỉ chọn 1 loại thôi nhé

STYLE CSS PHÂN TRANG

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Style 2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Style 4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} .showpageOf{display:none!important} #blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} #blog-pager .pages{border:none;background: none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} .showpageOf{display:none!important} #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} #blog-pager .pages{border:none;}

Nếu muốn ẩn dòng [First] và [Last] thì thêm đoạn code sau vào dưới đoạn code style trên hoặc trước ]]></b:skin>

2. CÀI ĐẶT JAVASCRIPT

- Thêm đoạn js sau vào trước thẻ </body>

<b:if cond='data:blog.pageType != "item"'>

<script type='text/javascript'>
/*<![CDATA[*/
var perPage=10;
var numPages=2;
var firstText ='Đầu';
var lastText ='Cuối';
var prevText ='« Về';
var nextText ='Tiếp »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>

<script type='text/javascript'>
/*<![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 += "Page " + currentPageNo + ' of ' + lastPageNo + "";
var prevNumber = parseInt(currentPageNo) - 1;

//Iccsi was here, doing magic
if (currentPageNo > 1) {
if (currentPage == "page") {
 html += '<a href="' + home_page + '">' + firstText + '</a>'
} else {
 html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a>'
}
}

if (currentPageNo > 2) {
if (currentPageNo == 3) {
if (currentPage == "page") {
html += '<a href="' + home_page + '">' + prevText + '</a>'
} else {
html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a>'
}
} else {
if (currentPage == "page") {
html += '<a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a>'
} else {
html += '<a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a>'
}
}
}
if (pageStart > 1) {
if (currentPage == "page") {
html += '<a href="' + home_page + '">1</a>'
} else {
html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a>'
}
}
if (pageStart > 2) {
html += ' ... '
}
for (var jj = pageStart; jj <= pageEnd; jj++) {
if (currentPageNo == jj) {
html += '' + jj + ''
} else if (jj == 1) {
if (currentPage == "page") {
html += '<a href="' + home_page + '">1</a>'
} else {
html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a>'
}
} else {
if (currentPage == "page") {
html += '<a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a>'
} else {
html += '<a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a>'
}
}
}
if (pageEnd < lastPageNo - 1) {
html += '...'
}
if (pageEnd < lastPageNo) {
if (currentPage == "page") {
html += '<a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a>'
} else {
html += '<a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a>'
}
}

var nextnumber = parseInt(currentPageNo) + 1;
if (currentPageNo < (lastPageNo - 1)) {
if (currentPage == "page") {
html += '<a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a>'
} else {
html += '<a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a>'
}
}

if (currentPageNo < lastPageNo) {
//Iccsi was here, doing magic
if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a>'
} else {
 html += '<a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a>'
}
}

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("?q=") == -1 && 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
}
document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&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';
newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&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") {
var pAddress = "/search?updated-max=" + timestamp + "&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>

TÙY CHỈNH JS

- perPage: Tùy chỉnh bài viết trên 1 trang. Thiết lập để đồng bộ với số bài đăng hiển thị ở trang chủ.
- numPages: Số phân trang hiện trên thanh navigation
- Thay các chữ First - Last - Previous- Next tùy ý bạn.

SỬA LỖI KHÔNG PHÂN TRANG Ở TRANG NHÃN

- Tìm các đoạn code sau:
expr:href='data:label.url'
- Thay thế bằng đoạn code sau:
expr:href='data:label.url + "?&max-results=10"'

Để gắn link trang nhãn vào menu bạn cần thêm đoạn max-results vào sau đường link như sau:

VD: /search/label/Blog%20SEO -> /search/label/Blog%20SEO?&max-results=10

Như vậy trang nhãn mới phân trang, đồng thời khi xuất bài bài viết mới bạn cần phải ngắt trang sau ảnh đầu tiên để tránh bài viết quá nặng mà mất bài.

TiemGiamGia Blog

Tìm kiếm Blog này