Cách tạo phân trang theo số cho blogspot

– helloện nay rất nhiều blogspot có số lượng bài viết nhiều vì thế việc phân trang để điều hướng người dùng là điều cần thiết đối với mỗi blogger. Phân trang giúp khách viếng thăm site của bạn có thể linh hoạt xem tất cả các bài viết trong 1 category chỉ trong 1 nhấp chuột. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang theo số cho blogspot.

Cách làm:
Bước 1: Vào Mẫu => Chỉnh sửa HTML => Tìm đoạn code:
[php]<b:widget id=’Blog1′ locked=’authentic’ title=’blog Posts’ sort=’blog’>[/php]
Sau đó chèn đoạn code này vào sau nó:
[php]<b:includable identification=’page-navi’>
<div type="pagenavi">
<script kind="textual content/javascript">
var pageNaviConf =
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "closing",
nextText: "»",
prevText: "«"
</script>
<script type="textual content/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div category="clear" />
</div>
</b:includable>[/php]
Bước 2: Tìm đoạn code tương tự thế này:
[php]<!– navigation –>
<b:include title=’nextprev’/>[/php]
Thay thế đoạn code trên bằng đoạn code này:
[php]<b:if cond=’data:weblog.pageType == "index"’>
<b:embody name=’page-navi’ />
<b:else/>
<b:if cond=’knowledge:blog.pageType == "archive"’>
<b:embrace title=’web page-navi’ />
</b:if>
</b:if>[/php]
Tùy chỉnh script:
– perPage: số bài viết helloển thị trong 1 trang
– numPages: số trang helloển thị
– firstText, lastText, nextText, prevText: các từ helloển thị cho các nút First, ultimate, 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:
Bước 3: Bạn chọn một trong các code sau để hiển thị sao cho đẹp bằng cách chèn đoạn code sau trước ]]>
Kiểu 1:

[php].pagenaviclear:each;margin:30px auto 20px;text-align:heart
.pagenavi span,.pagenavi abackground:#1dc1ff;padding:6px 6px;shade:#fff;margin:2px;font-dimension:12px;-moz-border-radius:5px
.pagenavi spancolour:#3a3a3a
.pagenavi a:hover,.pagenavi .presentbackground:#ff9200;colour:#fff;textual content-ornament:none
.pagenavi .pagesdisplay:none[/php]
Kiểu 2:

[php].pagenaviclear:each;textual content-align:proper;margin:25px zero 10px 0;font-measurement:.714em;font-weight:600;line-height:1.4em .pagenavi span,.pagenavi abackground:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-field-shadow:0 1px 0 #FFF;field-shadow:0 1px zero #FFF;colour:#555;margin-left:5px;padding:4px 6px 3px;textual content-shadow:zero 1px 0 #C2C2C2 .pagenavi spancolor:#3a3a3a .pagenavi a:hover,.pagenavi .currenthistorical past:-moz-linear-gradient(heart high,#45bc3f,#1c6318) repeat scroll zero 0 clear;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none .pagenavi .pageshistorical past:none;border:none[/php]
Kiểu 3:

[php].pagenaviclear:each;margin:10px auto;textual content-align:middle
.pagenavi span,.pagenavi a font-measurement:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;shade:#000;
.pagenavi a:visited
.pagenavi a:hover,.pagenavi .presentcolor: #FFF;heritage-colour: #e81d1d;border: 1px strong #fb1515;text-ornament:none;[/php]
Kiểu four:

[php].pagenaviclear:each;margin:10px auto;text-align:left
.pagenavi span,.pagenavi a history:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;
.pagenavi a:visited
.pagenavi a:hover,.pagenavi .presentcoloration: #FFF;history-coloration: #33393f;border: 1px solid #444;text-ornament:none; [/php]
Kiểu 5:

[php].pagenaviclear:each;margin:30px auto 20px;textual content-align:middle
.pagenavi span,.pagenavi abackground:#24bde2;border:1px strong #4adcff;padding:3px 8px;coloration:#fff;margin:2px;font-size:12px
.pagenavi spancolor:#3a3a3a
.pagenavi a:hover,.pagenavi .currentshade:#fff;heritage:#ff6734;border:1px strong #ddd;text-decoration:none
.pagenavi .pagesdisplay:none [/php]
Kiểu 6:

[php].pagenaviclear:each;margin:30px auto 20px;text-align:heart
.pagenavi span,.pagenavi ahistorical past:-moz-linear-gradient(middle high,#96aeba,#536a75) repeat scroll zero 0 transparent;border:1px solid #616e76;padding:4px 8px;colour:#fff;margin:2px;font-size:12px;-moz-border-radius:4px
.pagenavi spancolor:#3a3a3a
.pagenavi a:hover,.pagenavi .currentshade:#fff;history:#c70e0c;border:1px stable #782f28;text-ornament:none
.pagenavi .pagesshade:#fff[/php]
Kiểu 7:

[php].pagenavibackground:#3498b9;clear:both;margin:30px auto 20px;textual content-align:heart;border:1px stable #2f7a93;padding:4px 0
.pagenavi span,.pagenavi afont-weight:daring;padding:7px 8px;color:#fff;margin:1px;font-dimension:11px
.pagenavi spancolor:#3a3a3a
.pagenavi a:hover,.pagenavi .currentbackground:#236e8f;colour:#fff;text-decoration:none
.pagenavi .pagesshade:#fff[/php]
Kiểu 8:

[php].pagenavibackground:#f1f1f1;clear:both;margin:30px auto 20px;text-align:heart;border:1px strong #bfbfbf;padding:3px 0
.pagenavi span,.pagenavi aborder:1px stable #f1f1f1;padding:1px 4px;coloration:#000;margin:2px;font-size:12px
.pagenavi spancolor:#3a3a3a
.pagenavi a:hover,.pagenavi .presentborder:1px strong #bfbfbf;background:#fffdf0;colour:#000;text-decoration:none
.pagenavi .pagescolor:#666[/php]
– Ngoài ra còn rất nhiều các kinds khác nhau nếu bạn nào biết 1 chút css sẽ helloểu được vấn đền. Còn bạn nàall rightông helloểu muốn 1 styles màu khác thì có thể để lại remark mình sẽ hướng dẫn chi tiết.

(No Ratings Yet)

Loading...