1. Trước tiên việc bạn cần làm là chọn 1 trong các mẫu phía dưới.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxnLi_Tup2vF7nhlAMdpo6PpPiN3BDvOnZETzwibO5q2SY7c0TG_BSFH7vbpxWqHO7QXpdp9ntrvZpII7b9yMCkhfnwO_Vgf9U42vxMGUsKnhep9yf8bWiEjdQ7nub9XsNb9DFQi25z-2/s320/xamvang.jpg)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySrXz8hJJndwMuRS_8q8j6dv2C7ut-ri3csMwDBo6nnRiKlptwLhfRnZviY-o0j1mSFKpvbO3g2bDXcvmCpkeD_wY9uXct5muYBCqx9BgyDYB2g200B4qyh7hwMslHlO1E5YgXq-r0lUZ/s320/xanhlo.jpg)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf6Yy7CYjmGycC6botp2tc_Qr21sopJHntXi07nFf8aiKVQfEW6GKZnks91cRZ5QXczpprYFieyazJgX0ATIphN-qGrI93bDzT9vplzGmStz_aKi9g2sGrY4Mp5Ee5X1vxJdf9lRXqEW33/s320/xamxit.jpg)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-4BfihC2K0mKM4MRV37GqvAbdrZGoSw11nadjiNCXJpARsA_PIfalVKpzdEx89ss337zcNb8TtGON5Cu8UAE4WtkRCam1o0ZAQXLi-7kFOVnBDou8_eoqPXnw7OnxKSXd7lgbPCdMEvB/s1600/turquose.jpg)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9IErayGqrSrO6mRMLwWe7Ur32Ouipc4k2lSx0r2n43Lu086sH85MLgL3ZK5htYCWSjDLeDppKPuX6ryNHNTodY1TKKAxhaHXq4n3YBn5NSjx-B3jGhUtvbA6fOlppUhkOURcGrLLj0zXb/s1600/red.jpg)
.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;}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6IgqFrPoZEHgzFisgcnp4-guuiwDYnhTzefYZYvPMgMfP0uBpdJ-RDmqHeqq6rWFb7Ujqh2-fMVDo9ri8OQtKOf7lNy5TpBiMwNH5akCkdrCrqP1iDHFj_AZBPxbDvy94xjkeQGrw6dz/s1600/blue.jpg)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6BWjmbDN8Vi18r4UzF13OOIQ0LTG5n4VNCnJl5uRUUrP77fGrdVWBrNyoqL85Pfy1-W5oJUN2KCift9JWKQrXLwnBUvi_4NeFHR21ZcM_nUxip4ExVMEQSjjAJZK6lYtthcbzlOFppY2/s1600/green.png)
.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}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pXJ1IW1D9CUzOc-5RMv0VOcKlFl96m32uU5sPXNSwPb1JtAW7ofJ4oirjitmpKIUv48hfGXk1_iDUOocEU340nB6re4CGwNz6j3OsJnW-QrSDKO8qCIEcJBokxAvVp3lSKDnyIIu9rU1/s1600/black.jpg)
.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;}
2. Tiếp tục tìm đoạn code sau:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
<!-- navigation -->
<b:include name='nextprev'/>
<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>
Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ First Last có thể thay thế bằng chữ khác tùy thích.
Comments[ 0 ]
Đăng nhận xét