Tạo phân trang (page navigation) cho Blogspot

Thích Công Nghệ.Com - Thanh điều hướng cho Blogger được viết bởi Anhvo, đây là phân trang mình đánh giá cao cùng với phân trang của Abu Farhan bởi tính nhẹ nhàng. Chỉ dựa vào tổng số lượng bài viết và ngày tháng bài đăng mới nhất toàn blog hoặc từng nhãn được lấy từ feed. 

Tổng số lượng bài viết chỉ cần thông tin đầu tiên từ feed và dữ liệu được ngắt bởi max-results=0, ngày tháng bài đăng mới nhất được ngắt bởi max-results=1 có chứa thông tin của bài đăng mới nhất toàn blog hoặc từng nhãn. Việc không lấy toàn bộ dữ liệu từ feed để tạo phân trang không những giúp blog tải nhanh mà còn không bị lỗi với blog có trên 500 bài viết, đây là số lượng bài viết tối đa mà feed lưu trữ.

Vào Thiết kế chọn Chỉnh sửa HTML, đánh dấu Mở rộng Mẫu Tiện ích và tìm đoạn mã:

<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<style type='text/css'>

.blogpager {

background-color:#fff;clear:both;margin:-5px 0 10px;border: 1px solid red;margin-top:10px;padding:5px;text-align:center;font-size:12px;font-family:&#39;Tahoma&#39;;font-weight:400;

}

</style>

<div align='center' style='margin:5px;'><form action='#' name='pager20'><span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='3' title='Enter page number that You want to go' type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='3' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>

</form></div>

<script type='text/javascript'>

var blogID = &quot;6628069224773557671&quot;;

var home_page = &quot;/&quot;;

var pager_max_main = 7;

var pager_first_text = &quot;Trang Đầu&quot;;

var pager_last_text = &quot; Trang Cuối&quot;;

var pager_prev_text = &quot; Trang Sau&quot;;

var pager_next_text = &quot;Trang Tiếp&quot;;

</script>

<script type='text/javascript'>

//<![CDATA[

var pager_max_results = 20;

if(location.href.match("max-results=")){

pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("\&")[0]);

} else if(!location.href.match("/search/label/")){

pager_max_results = pager_max_main;

}

var per_page = pager_max_results ;

if(!location.href.match('/search/label/')) {

pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary";

pager_pageurl = home_page+"search";

}

else {

label = location.href.split("/")[5];

label = label.split("?")[0];

label = label.replace(/ /g,"%20");

pager_feedx = "https://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;

pager_pageurl = home_page+"search/label/"+label;

}

var pager_opening = 1;

if(location.href.match("popening=")){

pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("\&")[0]);

}

var num_pages = 1;

function createBlogPager(){

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

script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";

script.type = "text/javascript";

document.getElementsByTagName('head')[0].appendChild(script)

}

function countnumpost(json) {

var posts = json.feed.openSearch$totalResults.$t;

num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;

var a1 = document.createElement("a");

a1.className = "blogpager";

a1.title = "Jump to page: (1)";

a1.href = "javascript:page(1)";

a1.innerHTML = pager_first_text;

document.getElementById("vwg-pager-first").appendChild(a1);

var a4 = document.createElement("a");

a4.className = "blogpager";

a4.title = "Jump to page: ("+num_pages+")";

a4.href = "javascript:page("+num_pages+")";

a4.innerHTML = pager_last_text;

document.getElementById("vwg-pager-last").appendChild(a4);

var prev = (pager_opening!=1) ? pager_opening-1 : 1;

var a2 = document.createElement("a");

a2.className = "blogpager";

a2.title = "Jump to page: ("+prev+")";

a2.href = "javascript:page("+prev+")";

a2.innerHTML = pager_prev_text;

document.getElementById("vwg-pager-prev").appendChild(a2);

var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;

var a3 = document.createElement("a");

a3.className = "blogpager";

a3.title = "Jump to page: ("+next+")";

a3.href = "javascript:page("+next+")";

a3.innerHTML = pager_next_text;

document.getElementById("vwg-pager-next").appendChild(a3);

document.pager20.showingpage.value = pager_opening;

document.pager20.pagestotal.value = num_pages;

}

function checkpager(){

var uinput = parseInt(document.pager20.showingpage.value);

if((uinput <= num_pages)&&(uinput >= 1)) {

page(uinput);

}

else {

alert("Invalid page number. Please try by another!");

document.pager20.showingpage.focus() ;

document.pager20.showingpage.select();

}

}

function getDateAndGo(json){

var date2 = json.feed.entry[0].published.$t;

ss = parseFloat(date2.substring(17,19));

if(ss<59) ss++;

if(ss<10) { ss = "0"+ ss; }

date4 = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));

location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;

}

function page(startindex) {

pager_opening = startindex;

var i = per_page*(startindex-1)+1;

var script2 = document.createElement("script");

script2.src = pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";

document.getElementsByTagName('head')[0].appendChild(script2)

}

createBlogPager();

//]]>

</script>

</b:if>

Thay thế Blog ID: 6628069224773557671 thành BlogID của bạn và 7 thành số bài đăng bạn muốn hiển thị trên 1 trang.

- Tìm hết link có dạng: 

expr:href='data:label.url'

 thay thế thành 

expr:href='data:label.url + &quot;?&amp;max-results=7&quot;'

7 thành số bài đăng bạn muốn hiển thị trên 1 trang.

Theo Blog Duypham.net