Tiện ích phân trang PageNavi và một số style
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: "»",
prevText: "«" }
</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}
52 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
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
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.
Đứt cáp quang biển, dạo này Lag quá nhỉ :(
great your tips thank brada :)
Em thì em khoái kiểu 4 nhìn mượt :D
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ả?
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.
@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ó.
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) ^_^
@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 :*
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>
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.
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
mình thích tận dụng cái archive listing của blogger để phân trang ngay ;)) dễ tìm kiếm
Bác Noct đâu rồi, không thèm reply em luôn :((
@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.
Ủ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 :*
ôi thích quá :* =d>
:( chả được . . .
thẻ "b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'"
không chịu chứa thẻ "style"
Biết cái lỗi này lâu rồi nhưng giờ mới fix nè :D
cám ơn đã làm đc rồi, đẹp quá
blog hay. cam on nhé
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
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?
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
À 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.
@Vinh :
Bạn còn thiếu thẻ đóng
noct ơi sao mình chén hok đc @@
bị lỗi giống bạn Vinh
@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 @@
chắc vậy, bạn nên dùng các template Minima
quá tuyệt
Ko có hiện ở label hay sao mọi người nhỉ :-??
OK ! Thank ,đã áp dụng thành công :)
cho mình hỏi id lấy ở đâu vậy
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
@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.
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
hi hi, em sr anh em làm được rồi, quên mất :))
Chèn được rùi thanks bác nhiều!!! b-)
noct ơi , template của mình ko có :((
chỉ khi ấn mở rộng tiện ích ms có :|
Hay qúa chú ơi,chú giởi quá http://3.bp.blogspot.com/_U0QaeycS3vw/TTXukiq6NWI/AAAAAAAAAFE/cW28bc76C_k/ops.gif
@Thúy Hạnhchú :((:((:((
@Ivy Lovehttp://noct-land.blogspot.com/2011/05/blogspot-mot-so-van-e-thuong-gap.html
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 ....
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
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
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
Đă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