Tạo phân trang bài viết đẹp và chuyên nghiệp cho blogspot

Trang chủ » Thủ thuật » Tạo phân trang bài viết đẹp và chuyên nghiệp cho blogspot

Tạo phân trang bài viết đẹp và chuyên nghiệp cho blogspot

11 thg 12, 2013

Đa số những temmplate blogspot hiện nay đã hỗ trợ hoàn chỉnh những kiểu phân trang đẹp nhưng có những bản vẫn chưa có tiện ích này, tiện ích phân trang bài viết cho blogspot giúp cho người đọc có thể dễ dàng tìm đến những bài viết của mình hơn và giúp cho trang blog của bạn gọn hơn vì thế sẽ giữ được người đọc ở trang blog của bạn lâu hơn.

Cách làm:
Bước 1: Vào Mẫu => Chỉnh sửa HTML => Tìm đoạn code:<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>sau đó chèn đoạn code này vào 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: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Bước 2: Tìm đoạn code tương tự thế này:

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

Thay thế đoạn code trên bằng đoạn code này:

<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:
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 ]]></b:skin>
Kiểu 1:

phân trang bài viết đẹp và chuyên nghiệp cho blogspot

.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}