Một kiểu phân trang đẹp cho blogspot

Như các bạn biết thì Abu Farhan là người viết khác nhiều script phân trang cho blogspot. Tôi đã có nhiều bài viết giới thiệu một vài kiểu phân trang như vậy. Bạn có thể tìm ở tag Pagination trên blog này để tham khảo. Hôm nay xin tiếp tục giới thiệu một kiểu phân trang khác của Abu Farhan, tuy nhiên ở đây tôi có chút điều chỉnh để tạo dáng vẻ khác một chút cho kiểu phân trang này để cộng đồng Blogger Việt tham khảo.

Trước tiên bạn hãy xem hình minh họa bên dưới.

Để có dáng vẻ như vậy thì chúng ta cần tạo code CSS như bên dưới. 

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước dòng ]]></b:skin>.

#blog-pager{padding:4px 0;text-align:center;}
/* Số trang */
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Trang x trong y */
.showpageTotal {
margin:0 8px 0 0;
}
/* Trang hiện tại được đánh dấu */
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
/* Trang trước – Trang sau */
.showpagePN a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpagePN a:hover {
border:1px solid #888;
background: #ccc;
color:#fff;
}
/* Liên kết tạo Widget */
.showpageWidget{
font-size: 10px;
float: right;
margin: 10px 10px 0 300px;
}

Bạn có thể lấy mã mầu để tùy biến CSS theo ý muốn của mình để có một style khác.

Nếu bạn muốn ẩn liên kết Set up on your blogspot thì thêm display:none vào class showpageWidget.

Bước 2. Đặt đoạn code sau đây vào trước thẻ </body>.

<script type='text/javascript'>
//<![CDATA[
var postperpage=10;
var numshowpage=4;
var total_pag='Page:';
var upPageWord ='&#171; Prev';
var downPageWord ='Next &#187;';
var widget_pag='Set up on your blogspot';
//]]>
</script>
<script src='http://goo.gl/rgegj' type='text/javascript'/>

Bạn cần định dạng số bài đăng trên trang chính tương ứng với tham số postperpage=10 ở trên (Vào Settings >> Formatting >> ).

Lưu Template.

Bước 3. Chọn Expand Widget Templates. Tìm tất cả các dòng 'data:label.url' rồi thay nó bằng dòng

'data:label.url + &quot;?&amp;max-results=10&quot;'

Lưu Template là OK.