Cách tạo phân trang cho Blogspot (page navigation) - Phương án 1

Cùng Son Jovis sử dụng 1 phương án tạo phân trang cho Blogspot hiệu quả, đây là một trong những phương án đã được làm thành công. Cùng thực hiện và trải nghiệm ...

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ữ.

Bước 1. Vào chỉnh sửa HTML rồi tìm kiếm:

<b:include name='nextprev'/>

Bước 2: 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;7572674014422389051&quot;;

var home_page = &quot;/&quot;;

var pager_max_main = 6;

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>

Lưu ý:

- Thay thế Blog ID: 7572674014422389051 thành BlogID của bạn

- var pager_max_main = 6 : Thay số 6 thành số bài đăng bạn muốn hiển thị trên 1 trang

Bước 3: Tạo hiển thị số lượng bài viết khi tìm kiếm theo lable

1. Tìm kiếm tất cả các đoạn có mã

expr:href='data:label.url'

2. Thay thế bằng

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