Tiện ích phân trang PageNavi và một số style

/
page navi blogger
Tiện ích phân trang vốn không còn xa lạ với Blogspot, bài này chỉ giới thiệu script hack phân trang mà mình đang dùng cùng với một số style khá đẹp để bạn lựa chọn. Đây là script phân trang từ hỗn tạp blog viết lại theo phong cách WordPress, bạn có thể tham khảo cách làm ở bài viết gốc hoặc xem dưới đây.




 Trong template, chèn đoạn CSS sau phía trên </b:skin>
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

Tiếp tục tìm đến dòng này:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Chèn ngay sau nó:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Tiếp theo, tìm trong template của bạn:
<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Tùy chỉnh script:
perPage: số bài viết hiển thị trong 1 trang
numPages: số trang hiển thị
firstText, lastText, nextText, prevText: các từ hiển thị cho các nút First, Last, Next, Prev

Cơ bản vậy là xong, sau đây là một số style, hãy chọn kiểu phù hợp nhất với template của bạn rồi thay thế vào đoạn code màu xanh phía trên:

Kiểu 1:

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

Kiểu 2:

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Kiểu 3:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 4:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 5:

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

Kiểu 6:

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

Kiểu 7:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

Kiểu 8:

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}
Add a Comment

55 comments

ôi, tùy biến một chút css mà kết quả thật tuyệt. Cảm ơn Noct nhiều :D
À, sắp tới Noct cho ra đời vài themes mới nữa đi, anh em đang thèm =d> hehe

3/10/2011 comment-delete

Cũng gần xong một theme mới rồi nhưng từ từ mới ra mắt kẻo anh em nôn nao :D

3/10/2011 comment-delete

Chà, CSS của bác Noct ngày càng pro. Em thích cái kiểu 6, chỉ cần edit thêm tí là dùng được.

Nặc danh
3/10/2011 comment-delete

Đứt cáp quang biển, dạo này Lag quá nhỉ :(

Nặc danh
3/10/2011 comment-delete

great your tips thank brada :)

3/11/2011 comment-delete

Em thì em khoái kiểu 4 nhìn mượt :D

3/11/2011 comment-delete

Anh thì thích simple hơn.

PS: dạo này thấy Linh ít ra chưởng nhỉ. Ngâm bài lấy site link hả?

Nặc danh
3/11/2011 comment-delete

Kiểu phân trang này vẫn tải toàn bộ feed của blog về, feed blog mình không rõ hơn 1MB chưa. Tiếc là không liên lạc được với Abu để xin viết bài loại bỏ dòng bản quyền, kiểu của bác ta tải bài đầu tiên từ feed rồi dựa vào đó phân trang.

3/11/2011 comment-delete

@Noct : Có vẻ như em đã thấy temp đó của bác khi kiếm thông tin trên Google, vì chưa thấy bác giới thiệu nó.

3/11/2011 comment-delete

Chắc bác Abu dựa vào tổng số bài viết trong blog để làm, như vậy chỉ cần get json feed bài đầu tiên (đoán thế chứ chưa làm, do không thích chức năng này lắm) ^_^

Nặc danh
3/11/2011 comment-delete

@Duy Pham : Ủa thấy temp gì vậy hả DP :D
Cái script này tớ từng test trên data hơn 400 bài thấy load cũng nhanh mà =d>
Từng thử qua rất nhiều script hack phân trang nhưng đa số đều lỗi và hơi phức tạp khi tùy biến CSS, chỉ có cái này là đơn giản và ổn định nhất :*

3/11/2011 comment-delete

Wow cái phân trang này tuyệt lắm thanks Noct nhé , mình thấy cái style 6 và Style 8 =d> =d> =d>

Nặc danh
3/12/2011 comment-delete

Xin chào Noct và tất cả mọi người. Mình đã trở về sau chuyến công tác. Trong thời gian đó, tài lộc thì vô nhưng blog thì giảm traffic hẳn. Đúng là xa mặc cách lòng.

3/12/2011 comment-delete

Mừng anh Hà đã quay lại :)
Em nghĩ anh nên remove cái histat đi mới thanh thản trong lòng được :D

3/12/2011 comment-delete

mình thích tận dụng cái archive listing của blogger để phân trang ngay ;)) dễ tìm kiếm

Pig
3/12/2011 comment-delete

Bác Noct đâu rồi, không thèm reply em luôn :((

Nặc danh
3/13/2011 comment-delete

@Pika Rock : Mềnh thì disable luôn cái chức năng Archive luôn rồi :->
Từng nghe ở đâu đó nói rằng cái Archive khiến blog bị Duplicate Content.

3/13/2011 comment-delete

Ủa anh Trí, Blog ra phiên bản mới à :)). Em dzô thử Blogger Buzz xem cái Video kia giống như nó ra phiên bản mới quá =d> anh xem thử phải k
http://buzz.blogger.com/2011/03/whats-new-with-blogger.html

Ờ nó sắp upgrade giao diện mới :*

3/15/2011 comment-delete

ôi thích quá :* =d>

Thái
3/16/2011 comment-delete

:( chả được . . .
thẻ "b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'"
không chịu chứa thẻ "style"

4/10/2011 comment-delete

Biết cái lỗi này lâu rồi nhưng giờ mới fix nè :D

4/10/2011 comment-delete

cám ơn đã làm đc rồi, đẹp quá

HNT
4/29/2011 comment-delete

blog hay. cam on nhé

6/01/2011 comment-delete

Mẫu của bạn không thể được phân tích cú pháp vì được tạo không đúng. Hãy đảm bảo tất cả các phần từ XML được đóng chính xác.
Thông báo lỗi XML: The element type "b:includable" must be terminated by the matching end-tag "".

Sao mình lại gặp lỗi này nhỉ, please help

6/22/2011 comment-delete

Sao của mình chèn vào nó không căn giữa nhỉ? Mà nó còn không hiển thị được mầu của thanh phân trang?
- Thẻ [text-align:] đặt là center rồi mà. Mình dùng kiểu số 4. NOCT xem lại hộ cái được ko ah?

6/25/2011 comment-delete

nếu blog có nhiều bài viết (trên 500 bài) thì dùng phân trang này được ko bạn ? m làm đc phân trang rồi nhưng băn khoăn về số lượng bài viết

HNT
7/10/2011 comment-delete

À nếu có hơn 500 bài viết thì bạn dùng script phân trang khác, của Abu Farhan chẳng hạn.

7/10/2011 comment-delete

@Vinh :
Bạn còn thiếu thẻ đóng

7/10/2011 comment-delete

noct ơi sao mình chén hok đc @@
bị lỗi giống bạn Vinh

8/06/2011 comment-delete

@Bựa Nhân : Mình sài mẫu mặc định template của blogger .
Chèn cái này k đc , hix @@

8/06/2011 comment-delete

chắc vậy, bạn nên dùng các template Minima

8/06/2011 comment-delete

quá tuyệt

9/11/2011 comment-delete

Ko có hiện ở label hay sao mọi người nhỉ :-??

Nặc danh
9/19/2011 comment-delete

OK ! Thank ,đã áp dụng thành công :)

10/04/2011 comment-delete

cho mình hỏi id lấy ở đâu vậy

10/20/2011 comment-delete

Noct cho mình hỏi một chút . Mình có sài ứng dụng Page Navi của Noct , hiệu quả rất tốt , phải nói là thế .

Các trang của mình đều dùng chung một template . Minh copy template của trang này và úp cho trang khác , đều k có gì xãy ra .

Hnay mình có tạo 1 site nữa , thế mà tự nhiên Page Navi k hiện , Related Post cũng k ăn , Noct có thể cho mình biết nó bị gì không ! Thank Nock

11/20/2011 comment-delete

@Thinh Tran bạn đăng chưa đủ số bài cần thiết hoặc blog đang ở chế độ không cho người khác xem.

11/21/2011 comment-delete

em đã chèn thử phân trang, nhưng khi click sang trang 2 thì không được nữa ? hic hic, giúp em với

12/04/2011 comment-delete

hi hi, em sr anh em làm được rồi, quên mất :))

12/04/2011 comment-delete

Chèn được rùi thanks bác nhiều!!! b-)

12/14/2011 comment-delete

noct ơi , template của mình ko có :((




chỉ khi ấn mở rộng tiện ích ms có :|

1/29/2012 comment-delete

Hay qúa chú ơi,chú giởi quá http://3.bp.blogspot.com/_U0QaeycS3vw/TTXukiq6NWI/AAAAAAAAAFE/cW28bc76C_k/ops.gif

2/19/2012 comment-delete

@Thúy Hạnhchú :((:((:((

2/19/2012 comment-delete

Bạn ơi, mình chỉnh đi chỉnh lại mãi cái perpage mà nó vẫn ko hiện số bài như ý mình. Mình sử dụng theme download từ internet, họ đã có sẵn phân trang, nhưng phân không chính xác :((( Làm sao giờ

3/02/2012 comment-delete

@Ivy Lovehttp://noct-land.blogspot.com/2011/05/blogspot-mot-so-van-e-thuong-gap.html

3/03/2012 comment-delete

sao mình làm cũng ko uov luôn
cứ báo là thiếu thẻ đóng nhưgn thấy đóng roi mà ta. bạn check code lại coi co sai ko ....

3/18/2012 comment-delete

Hu hu sao kiểu 4 cài vào hiện ra kiểu 1 thế này, hjx chỉnh mãi ko đc :((

Mình chỉnh được style 4 rồi, đưa lên cho những newbie như mình nè:

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background-color: #536a75;background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;background:-webkit-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;-moz-border-radius: 10px;-webkit-border-radius: 10px;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}


Các bạn thay vào dòng CSS nha!
Các chữ màu xanh các bạn nên chỉnh nhỏ lại nếu ko sẽ tròn tròn ngộ ngộ như blog mình.

làm kiểu số 4 ,à không thấy có cữ last gì hết ah

7/02/2012 comment-delete

Cho mình hỏi chút là khi minh áp dụng đúng như chỉ dẫn của khi xem trước nó hiện lên dong này. "Tiện ích với id "Blog1" không thể chứa phần tử: "#comment". Tiện ích chỉ có thể chứa các phần tử b:includable.
Error 500" và khong thể lưu lại được.

Mong được giúp đỡ

Không thấy thẻ này "b:include name='nextprev'/" trong template của mình làm sao đây nhỉ? http://blog.phuthinh.co

7/29/2012 comment-delete

Các tiện ích của bác cái này củng ngon ko thể tả... Mong phát huy :)

8/08/2012 comment-delete

Cám ơn Noct-land rất nhiều! Search trên google ra bao nhiêu kết quả, làm mãi ko được. Vào trang này search, làm phát được luôn :D

:))

12/21/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License