• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Phân trang Blogger theo kiểu Wordpress

19
15/11/2010

Về phân trang thì Blogger chỉ mặc định các nút Older Posts (Bài đăng Cũ hơn), Newer Posts (Bài đăng Mới hơn), Home (Trang chủ) để liên kết đến các bài viết lẫn nhau và kiểu phân trang sơ đẳng này không làm thỏa mãn các blogger.

Nếu ai từng lướt qua một blog được thiết kế bằng Wordpress thì có thể thấy kiểu phân trang khá chuẩn bằng 1 plugin có tên WP-PageNavi. Nếu tìm hiểu plugin này thì sẽ thấy phần mã CSS mặc định như sau:
/*
Default style for WP-PageNavi plugin
http://wordpress.org/extend/plugins/wp-pagenavi/
*/
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}
Chúng ta có thể điều chỉnh một chút từ phần CSS này để sử dụng cho Blogger.

Đăng nhập Blogger, vào Edit HTML. Chèn vào trước dòng ]]></b:skin> với đoạn mã bên dưới.
.pagenavi{clear:both;margin:10px auto;text-align:center;}
.pagenavi span {padding:3px;margin-right:5px;background:transparent;border:none;}
.pagenavi a {padding:3px;margin-right:5px;text-decoration: none;background:#747170;}
.pagenavi a:visited{color:#fff}
.pagenavi a:hover {background:#044697;color:#fff;text-decoration:none}
.pagenavi .current {font-weight:bold;color:#fff;background:#F87217;text-decoration: none;}
.pagenavi .pages {font-weight:bold;border:none;}
Bạn có thể điều chỉnh các thông số màu sắc để điều chỉnh cho phù hợp với Blog của mình.

Lưu Template rồi chọn Expand Widget Templates.

Tiếp theo là cài đặt javascript. Trong Template (dùng tổ hợp phím Ctrl + F) tìm đến các dòng mã:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
..................
<b:includable id='main' var='top'>
..................
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='comments' var='post'>
…………………..
</b:widget>
</b:section>
Chèn trước dòng <b:includable id='feedLinksBody' var='links'>

bằng đoạn mã bên dưới.
<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script src='http://hacodeproject.googlecode.com/files/pagenavi_v2.min.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>
Bạn có thể tải về file pagenavi_v2.min.js và upload lên hosting để sử dụng cho Blog của mình.

Tiếp đến, tìm đến dòng sau đây:

<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã bên dưới:
<!-- navigation -->
<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>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
Ý nghĩa của đoạn mã trên là hiển thị phân trang kiểu Wordpress ở các trang chủ, trang label và trang lưu trữ, còn các trang bài viết thì dùng kiểu phân trang mặc định của Blogger.

Bạn có thể điều chỉnh các tham số sau đây:

var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

trong đó:

- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

Nếu bạn gặp khó khăn trong việc cài đặt, xin vùi lòng để lại câu hỏi dưới đây.

{19 bình luậnAdd yours ?}

15:20:00, 4 thg 2, 2011

Bạn Hà ơi, mình đã test thành công code phân trang này, nhưng mà sao mỗi trang là nó mất hết 2 bài viết, chẳng hiểu sao nữa!
http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep?max-results=7

Reply
06:17:00, 10 thg 2, 2011

sao mà của mình code phân trang này cứ mỗi trang nó lại mất đi 3 bài, mình đã vào mục cài đặt chọ hiển thị tối đa là 7 bài, bạn Hà giúp mình với!
http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep?max-results=7

Reply
21:12:00, 17 thg 2, 2011

@Binh LeeAnh Hà ơi, anh vẫn chưa giải đáp giùm em!
http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep?updated-max=2011-02-06T06%3A12%3A00-08%3A00&max-results=7

Reply
21:35:00, 17 thg 2, 2011

Mà em hỏi gì vậy, quên mất tiêu rồi, em cứ nêu lại câu hỏi, mai tranh thủ giải đáp nhé

Reply
21:39:00, 17 thg 2, 2011

@Huỳnh Nhật Hàhttp://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep chẳng hiểu sao kiểu phân trang này cứ mỗi trang là nó bị mất 3 post, anh giúp em với!

Reply
21:53:00, 17 thg 2, 2011

@peace19812006 Không phải kiểu phân trang này làm mất bài mà (em thử cài kiểu phân trang nào cũng vậy thôi) có lẽ do lúc trước em xài cái phân trang của mothuthuat.com mà bên traidatmui.com gioi thieu lại. Kieu phan trang này còn lỗi nên lúc cài đặt em không Backup Template, dẫn đến Template XML bị lỗi vì vậy em có cài kiểu phân trang nào cũng bị vậy thôi. Chỉ còn cách Design lại Template thôi.

Reply
22:00:00, 17 thg 2, 2011

@Huỳnh Nhật HàEm thì tệ về code lắm, kêu em design lại thì đành bó tay! :(

Reply
21:57:00, 25 thg 2, 2011

Anh Hà ơi, anh tìm lỗi giùm em sao trang của em xài phân trang nào cũng bị lỗi hết trơn! :(
http;//www.nguontrithuc.tk

Reply
22:06:00, 25 thg 2, 2011

không biết đăng bài ở đâu nên em post ở đây luôn: em thích cái template này, nhưng không hiểu cái hình kế tiêu đề bài đăng nó toàn hiện chữ "undefined", em tìm code chỗ nào đễ sữa lỗi ảnh đó, anh coi giùm em!
http://lynhatruc.blogspot.com/2011/01/mot-so-cach-phat-am-kho-khan-cho-nguoi.html

Reply
22:17:00, 25 thg 2, 2011

@Binh Lee
em tìn được lỗi này rồi, anh nhớ coi giùm em lỗi ở trang nguontrithuc nha!

Reply
22:22:00, 25 thg 2, 2011

Lỗi đó dễ sửa thôi, để rảnh a viết bài hướng dẫn. Hôm nay a bận upload mấy cái hình trên các bài viết vì hình upload lên imageshack bà con xài hết băng thông rùi.

Reply
20:43:00, 28 thg 2, 2011

Anh Hà ơi, xem giùm em lỗi phân trang của trang nguontrithuc đi anh!

Reply
21:20:00, 28 thg 2, 2011

Trang đó của em cơ bản vẫn bắt nguồn từ thuật phân trang mà bên traidatmui giới thiệu lại của mothuthuat.com. Lỗi phát sinh đó bây giờ chỉ có thể design lại phần Main mới được.

Reply
21:23:00, 28 thg 2, 2011

Em rất thích cái template mình đang xài, nhưng tiếc là phân trang bị lỗi, chẳng lẽ không xài template này thì tiếc quá!

Reply
20:44:00, 3 thg 3, 2011

Anh Hà ơi, anh chỉ em làm sao để có thể xuất hiện bài đăng cũ hơn và mới hơn trong mỗi label!
http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep

Reply
21:46:00, 3 thg 3, 2011

Anh Hà ơi, không biết cái phân trang này không bị lỗi hay tại em chỉnh perpage là 4 nên nó không còn bị lỗi nữa! :)
Em tham khảo phân trang này tại: http://simplexdesign.blogspot.com/2010/11/numbered-page-navigation-for-simplex.html
Còn đây là trang của em đã áp dụng: http://www.nguontrithuc.tk/search/label/Truyen%20kiem%20hiep

Reply
22:17:00, 3 thg 3, 2011

Cách đó với cách này k khác gì em à. Phân trang đã test rồi k có lỗi gì đâu. :60)

Reply
05:56:00, 4 thg 3, 2011

Trang http://www.cannao.com có trắc nghiệm trực tuyến, có thống kê số người trả lời đúng sai, trên blogger mình có thể làm được như vậy không anh?

Reply
07:44:00, 4 thg 3, 2011

Trang đó dùng ngôn ngữ PHP, Blogger chỉ XML k xài PHP được nên bó tay.com. Blogger chỉ làm bảng chọn trắc nghiệm được nhưng k link đến trang xem kết quả được, coi như vô dụng thôi.

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn