Tạo phân trang kiểu Google cho Blogspot

Tạo phân trang (page navigation) kiểu Google cho Blogspot

Page navigation for Blogger with Google Style

Hiện nay trên cộng đồng Blogger có khá nhiều kiểu phân trang khác nhau cho blogspot. Mỗi kiểu đều có nét đẹp và ưu điểm riêng cho nên bạn cần lựa chọn kiểu nào phù hợp nhất để cài đặt cho blog của mình.

Script cho các kiểu phân trang dường như có những điểm na ná giống và cách cài đặt cũng vậy. Ở đây mình xin giới thiệu một kiểu phân trang theo phong cách Google.
Xem Demo: Demo for post

Ảnh minh họa:

Chú ý: Hiện nay namkna đã có bản cập nhật cho tiện ích này. Các bạn hãy thực hiện thủ thuật mới Tại đây (Click here) để khắc phục một số lỗi của tiện ích cũ này nha.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn Chỉnh sửa HTML (Edit HTML) - Tiếp tục => Xem video:

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3JrdWL2nsQR8AvjusWvHRjgZ17z9gZ9uKLEFn-jV91ur27l0IppdQVWO1aS4VpFqWb_cQV6lrZ5h4KhyEm-Lm-Xh5vDh3W7MeJRpOjyYZ8-FN40xhqtiNimae_YoHp3c01h5TsX0jnBi/s1600/nav_logo-namkna-blogspot-com.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

5. Chèn tiếp code bên dưới vào trước thẻ </body>.

<script type='text/javascript'>

var home_page_url = location.href;	

var pageCount=10;
var displayPageNum=6;
var upPageWord ='« Trang trước';
var downPageWord ='Trang tiếp »';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

		
	var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
	timestamp = encodeURIComponent(timestamp1);
	var title = post.title.$t;
			if(thisUrl.indexOf(timestamp)!=-1 ){
					thisNum = postNum;
			}
	
			postNum++;
			htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&amp;max-results='+pageCount;
	
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
	var banyaknomer = htmlMap.length -1 ;
	postNum=postNum-1;
};

	
for(var p =0;p&lt; banyaknomer;p++){
	if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
		if(fFlag ==0 &amp;&amp; p == thisNum-2){
			if(thisNum==2){
				upPageHtml = '&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
			}else{
				upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
			}
	
			fFlag++;
		}
	
		if(p==(thisNum-1)){
			if(p==0){
				html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
			}else{
				html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
			}
		}else{
			if(p==0){
					html += '&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';

			}else{
				html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
			}
		}
	
		if(eFlag ==0 &amp;&amp; p == thisNum){
			downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
			eFlag++;
		}
	}
}
	
if(thisNum&gt;1){
	html = ''+upPageHtml+' '+html +' ';
}
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
	
if(thisNum&lt;(postNum-1)){
	html += downPageHtml;	
}else{
	html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}


	
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
	

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
	html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
	pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
	html ='';
}

if(blogPager){
	blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
var thisUrl = home_page_url;	

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
	var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
	timestamp = encodeURIComponent(timestamp1);

	
	var title = post.title.$t;

			if(thisUrl.indexOf(timestamp)!=-1 ){
				thisNum = postNum;
			}
	
			if(title!='') postNum++;
			htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+pageCount;
				
	itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
	var banyaknomer = htmlMap.length -1 ;
	postNum=postNum-1;
};
	
for(var p =0;p&lt; banyaknomer;p++){
	if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
		if(fFlag ==0 &amp;&amp; p == thisNum-2){
			
			
			
			if(thisNum==2){
				upPageHtml = labelHtml +'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
			}else{
				upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
			}
	
			fFlag++;
		}
	
	
	
	
	
		if(p==(thisNum-1)){
			if(p==0){
				html += '&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';
			}else{
				html += '&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+thisNum+'&lt;/td&gt;';				
			}
		}else{
			if(p==0){
				html = '&lt;td&gt;'+labelHtml+'&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;';
			}else{
				html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
			}
		}

	
		if(eFlag ==0 &amp;&amp; p == thisNum){
			downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
			eFlag++;
		}
	}
}


	
	
if(thisNum&gt;1){
	if(!isLablePage){
		html = ''+upPageHtml+' '+html +' ';
	}else{
		html = ''+upPageHtml+' '+html +' ';
	}
}
	
html2 = '&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page  ('+(postNum-1)+')   &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;
	
if(thisNum&lt;(postNum-1)){
	html += downPageHtml;	
}else{
	html += '&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;';
}
	
if(postNum==1) postNum++;
html += html3+ '&lt;/div&gt;';
	
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
	html ='';
}

for(var p =0;p&lt; pageArea.length;p++){
	pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
	html ='';
}

if(blogPager){
	blogPager.innerHTML = html;
}


}


</script>

<script type='text/javascript'>

 	var thisUrl = home_page_url;
	if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
		if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
			var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
		}else{
			var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
		}
	}

	var home_page = &quot;/&quot;;
	if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){	
		if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){			
			document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
		}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
		}
	}
</script>

Trong đó:

var pageCount=10; (Số bài viết muốn hiển thị)
var displayPageNum=9; (Số phân trang)
var upPageWord ='« Trang trước'; (Có thể thay đổi chử Trở về thành chữ Prev...)
var downPageWord ='Trang tiếp »'; (Có thể thay đổi chử Next..)

6- Sau đó bấm Lưu Mẫu lại.

7- Tich chọn mở rộng tiện ích mẫu Tìm tất cả các dòng nào như thế này:

'data:label.url'

Rồi thay thế nó bằng dòng

'data:label.url + "?&max-results=10"'

8- Sau đó bấm Lưu Mẫu lại.

9- (có thể thực hiện hoặc không tùy template) Tiếp theo bạn cần định cấu hình bài đăng trên trang chính là 10 bài đăng. Vào Phần tử trang (Page Elements) >> Chỉnh sửa Bài đăng trên Blog (Edit Blog Posts) chọn Số bài đăng trên trang chính là 10.

Chú ý: Hiện nay namkna đã có bản cập nhật cho tiện ích này. Các bạn hãy thực hiện thủ thuật mới Tại đây (Click here) để khắc phục một số lỗi của tiện ích cũ này nha.

Theo: abu-farhan.com

Nhận xét

Unknownlúc 14:58:00 GMT+7 Thứ Ba, 2 tháng 10, 2012
bạn có thể giúp mình phân trang cho một trang riêng lẻ không?Ví dụ như trang software trong http://relax2020.blogspot.com. Pm:cutiannum@gmail.com
Trả lờiXóa
Trả lời
Unknownlúc 21:20:00 GMT+7 Thứ Sáu, 26 tháng 10, 2012
@se SELENA Bạn bị lỗi cú pháp rồi, thêm dấu ; sau tất cả chữ max-results là ok :G)
Trả lờiXóa
Trả lời
dvthanhlúc 11:44:00 GMT+7 Thứ Năm, 15 tháng 11, 2012
Làm đến bước sáu thì bị lỗi này: "Lỗi khi phân tích cú pháp XML, dòng 1453, cột 58: The reference to entity "max-results" must end with the ';' delimiter.". nghĩa là bị làm sao hả bạn. Nếu blog đã có phân trang cũ rồi thì có phải xoa đi ko
Trả lờiXóa
Trả lời
Ngân Gianglúc 20:11:00 GMT+7 Thứ Tư, 9 tháng 1, 2013
Khó quá!...Muốn nản rồi bạn ơi!...
Trả lờiXóa
Trả lời
Unknownlúc 14:13:00 GMT+7 Thứ Ba, 22 tháng 4, 2014
Mất luôn danh sách post trên trang chủ adm ak.
Trả lờiXóa
Trả lời

Thêm nhận xét

Tạo phân trang kiểu Google cho Blogspot

Page navigation for Blogger with Google Style

Đăng bởi: Namkna

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1