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ủ•
Phân trang Blogger theo kiểu Wordpress  Thtx_010Phân trang Blogger theo kiểu Wordpress  Thtx_011Phân trang Blogger theo kiểu Wordpress  Thtx_012
Phân trang Blogger theo kiểu Wordpress  Thtx_013[KiNg]_[PiN]-BBPhân trang Blogger theo kiểu Wordpress  Thtx_014
Phân trang Blogger theo kiểu Wordpress  Thtx_015Phân trang Blogger theo kiểu Wordpress  Thtx_016Phân trang Blogger theo kiểu Wordpress  Thtx_017
•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.



Phân trang Blogger theo kiểu Wordpress  Pagenaviwp
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

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 | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải