Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

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:
Code:

/*
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 ]]> với đoạn mã bên dưới.


Code:
.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ã:

Code:
<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>
[color=red]<b:includable id='feedLinksBody' var='links'>[/color]
<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ằng đoạn mã bên dưới.


Code:
<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:





Thay thế nó bằng đoạn mã bên dưới:
Code:


<!-- 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

Hãy xây dựng diễn đàn cùng [KiNg]_[PiN]-BB bạn nhé !!!


Admin không phải cái gì cũng biết
Admin chỉ mở ra một cộng đồng để những người hiểu biết và mới biết, trao đổi học tập !
Mong Các bạn đừng đánh giá hay nói bất cứ một lời lẽ nào khích tướng OK...

Không Hay Đừng Nói Lời Cay Đắng

[*]Diễn đàn đẹp nhất với trình duyệt web Mozilla Firefox
[*]Còn với mấy loại còn lại chắc là thuộc dang diễn đàn tồi nhất !!!
Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Have a free blog with Sosblogs
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải